Develop Reference

How to dynamically show a button based on conditions where the value being used to determine what button to show isn't known until it's clicked?

If someone has a better title feel free to edit. I inherited a project from a developer who is leaving the company and I'm scratching my head trying to find a solution to a problem the existing code provides.
Code from the view:
<div>
<table class="table">
<tr>
<th class="border-bottom border-top-0">Action</th>
</tr>
#foreach (Step actionItem in Model.Steps)
{
#if (actionItem.HasRun == false)
{
<tr class="border-top-0">
<td>
#if (actionItem.ReturnsInfo == true)
{
<input type="button" value="Run Check" onclick="loadProcessingFeedbackPartial('#actionItem.StepID', '#Model.Client.DatabaseConnectionString' )" />
}
else
{
<input type="submit" value="Run Check" name="btnRunStoredProcedure" asp-action="CallStepStoredProcedure" asp-route-StepID="#actionItem.StepID" asp-route-StepCompleted="#actionItem.HasRun" />
}
</td>
</tr>
break;
}
}
</table>
</div>
Javascript being called from the button click:
<script type="text/javascript">
function loadProcessingFeedbackPartial(x, y) {
var url = '#Url.Action("ViewProcessingFeedBackPartial", "Client")';
var stepId = x;
var databaseConnectionString = y;
$("#processingFeedbackPartialDiv").load(url, { stepId, databaseConnectionString },
function () {
$("#confirmButton").removeAttr("style");
});
}
</script>
Controller action:
public IActionResult ViewProcessingFeedBackPartial(int StepId, string DatabaseConnectionString)
{
FeedbackDetails feedbackDetails = new FeedbackDetails();
feedbackDetails.Data = _clientProcessingService.GetProcessingFeedbackDetails(StepId, DatabaseConnectionString);
return PartialView("_ViewFeedback", feedbackDetails);
}
The button in the view has an Onclick event that goes to the Javascript function, which loads a partial view with the data from the controller calling a service method. Here's where the problem is. If no rows are returned, I want to bypass the partial being drawn entirely.
So I changed the controller action around a bit to include a condition where if the feedbackDetails.Data has 0 rows to just call a different method from the service, process as normal, but return the View instead of a partial.
public IActionResult ViewProcessingFeedBackPartial(int StepId, string DatabaseConnectionString, int ClientId)
{
FeedbackDetails feedbackDetails = new FeedbackDetails();
feedbackDetails.Data = _clientProcessingService.GetProcessingFeedbackDetails(StepId, DatabaseConnectionString);
if(feedbackDetails.Data.Rows.Count == 0)
{
_clientProcessingService.RunProcessStepConfirmation(DatabaseConnectionString, StepId, ClientId, "No information returned, automatically proceeding to next step.");
return RedirectToAction("Processing", new { Id = ClientId });
}
return PartialView("_ViewFeedback", feedbackDetails);
}
This "worked", except since in the view it's being called in a Javascript function that loads a partial regardless, the view is returned inside that partial instead of the view being returned.
But I'm unsure how to fix this because without first clicking the button and attempting to populate that collection with data, I don't know if it's empty (and skip the partial) or it has rows (and draw the partial).
I attempted creating an intermediary controller action that returns a boolean and attempted to use the result of that inside the javascript function to either draw the partial or skip it based on the bool, but I'm not really the greatest at Javascript so I wasn't able to get it to work.
I'm unsure if the way to solve this involves creating logic that displays multiple buttons that route to different controller actions or javascript functions or just handling it all via Javascript somehow.
What would be a good way to go about solving this?

#Mkalafut, your jQuery function is loading the controller result directly into "#processingFeedbackPartialDiv" regardless of the result received. Better to pull this initially into a variable, then add some simple logic to decide what to do next. Potentially the controller can help by returning a null result that is easy to identify.
e.g.
$.get("url", { stepId, databaseConnectionString }, function (data) {
var result = data;
// Some example conditional logic - adjust as required
if (result != null){
$("#processingFeedbackPartialDiv").html(result);
$("#confirmButton").removeAttr("style");
}
});
Remember, jQuery load & get are both just shorthand functions for ajax, so if needs be you can customise the code further to get the flexibility you need.
https://api.jquery.com/jQuery.get/
https://api.jquery.com/load/

Populate data from groovy controller in pop up

I have a gsp page with a delete button for each row of a table. On the button click I want a pop up which tells the consequences of the delete. These consequences depends on the data present in the row and a few other constraints known to the grails service which is called from the grails controller associated to the gsp page. If the user confirms these consequences the row should be deleted from the table, else the table remains unchanged.
How should i go about to achieve this behavior?
Currently, I have in my gsp
<tr>
<td>name</td>
<td>parentName</td>
<td>data</td>
<td>
<g:link action="deleteRow" params="${[name: row.name, parentName: row.parentName]}">
<button class="deleteSnapshot">Delete</button>
</g:link>
</td>
</tr>
and in my .js file
$(document).on('click', ':button', function (e) {
var btn = $(e.target);
btn.attr("disabled", "disabled"); // disable button
alert('getting deletion details');
//var deletionDetails -->not sure how to get these
//var deletionDetails will get data from controller action:"getDetails"
if (confirm('/*print deletion details and ask*/ Do you want to proceed?')) {
alert('will delete')
return true
}
else {
btn.removeAttr("disabled"); // enable button
return false
}
});
and in my controller
class DeleteController{
DeleteService deleteService
def index() {
[list:deleteService.getTableList()]
}
def getDeletionDetails(string name, String parentName){
return deleteService.getDetails(name,parentName)
}
def deleteRow(String name, String parentName){
service.deleteRow(name, parentName)
redirect controller:"DeleteController", action:"index"
}
}
I know the deletion works fine, because it works even with in the current state. Just that the confirmation box asks Do you want to proceed, without displaying the details.
Any help on how i could achieve what I am looking for will be appreciated.
P.S. I am new to stackoverflow, so if i missed out on certain convention do let me know.
Thanks in advance.

I can think of two ways of doing it:
The first one is using ajax to both get deletion details and delete the row
Assuming that deleteService.getDetails(name, parentName) returns a String,
first you need to change an getDeletionDetails action so it renders the response:
def getDeletionDetails(String name, String parentName){
render deleteService.getDetails(name, parentName)
}
and change g:link-s to buttons in gsp:
<button data-name="${row.name}" data-parent-name="${row.parentName}">
Delete
</button>
In your .js then put:
$(document).on('click', ':button', function (e) {
var btn = $(e.target);
btn.attr("disabled", "disabled"); // disable button
var name = btn.data('name');
var parentName = btn.data('parentName');
$.ajax({
url: "/delete/getDeletionDetails",
data: {
name: name,
parentName: parentName
},
success: function (data) {
if (confirm(data + '\nDo you want to proceed?')) {
$.ajax({
url: '/delete/deleteRow',
data: {
name: name,
parentName: parentName
},
success: function (d) {
console.log("Success: " + d);
}
});
} else {
btn.removeAttr("disabled"); // enable button
}
}
});
});
What this code does is it sends an ajax call to /delete/getDeletionDetails, then uses its response (rendered by getDeletionDetails action in DeleteController) to show a confirmation alert. If user confirms the question, another ajax call is sent - now to deleteRow action of DeleteController - with parameters taken from data attributes of clicked button. If user cancels - nothing happens, except for reenabling a button.
Your deleteRow should only change the return statement - it also must render the response:
def deleteRow(String name, String parentName){
service.deleteRow(name, parentName)
render "You deleted an item $name - $parentName."
}
You don't need redirect here, because - thanks to using ajax - user will never leave delete/index. You can just display some kind of confirmation on page after successful ajax call.
The second option is to put deletion details in hidden fields or data- attributes in each row and then just retrieve them in js:
You can create a method getDeletionDetails() in row's domain class (presumably Row) that returns the details (using services in domain classes is not perfect, but is should work ok if the service is not very complex). Then, in your .gsp place:
<td>
<g:link action="deleteRow" params="${[name: row.name, parentName: row.parentName]}">
<button class="deleteSnapshot" data-details="${row.deletionDetails}">Delete</button>
</g:link>
</td>
You should then be able to get details in .js like this:
var deletionDetails = btn.data('details');

asp.net - Manipulate Page Content

I was wondering if anyone could explain how to manipulate content for various sections of a page depending on if a button is clicked. I think what I am looking for is similar to an include in php. I wasnt sure if asp.net had a way to do the same (partial view?) or if bootstrap/jquery is the way to go. I've included a .png to illustrate what I am trying to do.
I would like section b's content to change based on what button is selected in section A. While not necessarily relevant to this question.. I then would like various user inputs in section B to manipulate existing content in section C.

In your controller, have an action that returns a PartialView:
public PartialViewResult MyPartial(string someText)
{
var model = new MyPartialModel {SomeStuff = someText};
return PartialView(model);
}
Create the model and partial view as you would any other:
public class MyPartialModel
{
public string SomeStuff { get; set; }
}
Partial View:
#model ExampleApp.Models.MyPartialModel
#Html.TextBoxFor(m => m.SomeStuff)
Then on your page you can load in your partial via ajax with jQuery:
<div>
<button type="button" id="load-partial">Load The Partial!</button>
</div>
<div id="section-b"></div>
#section Scripts{
<script>
$(document).ready(function () {
$('#load-partial').click(function () {
$.get('MyPartial', { sometext: "Hello!" }).done(function (data) {
$('#section-b').html(data);
});
});
});
</script>
}
Edit to answer comment:
If you don't want to instantiate a new model in the controller each time, you can pass the model (more or less) directly from the view.
In you controller, have a very simple action that accepts a model as a parameter and returns the partial view. Note the HttpPost attribute.
[HttpPost]
public PartialViewResult MyPartial(MyPartialModel model)
{
return PartialView(model);
}
The model's got more than one property this time:
public class MyPartialModel
{
public string Name { get; set; }
public int Age { get; set; }
}
The partial's pretty much the same, except it now displays the new properties of the model.
#model MVCPlayGround.Models.MyPartialModel
#Html.TextBoxFor(m => m.Name)
#Html.TextBoxFor(m => m.Age)
The jquery on the main page/view is very also similar, but uses POST instead of GET.
// these could be anything, from control on the page, or whatever
var name = "James";
var age = 30;
$(document).ready(function () {
$('#load-partial').click(function () {
// note that Name and the Age are the names of the properties in our model
$.post('MyPartial', { Name: name, Age: age }).done(function (data) {
$('#section-b').html(data);
});
});
});
This works because when data transmitted via POST, it's treated as form data, and when the controller's deciding which action to use it'll look at the parameters for the actions, and compare them to the form data available. The MyPartialModel contains properties that match the form data, so it chooses that action. There are other subtle rules, but that's basically it. Behind the scenes it'll still be instantiating a model in the controller, it's just in the framework, not in the code you've written.
Another edit
Having just re-read your comment I don't think I've answered it fully.
If you want to save the changes you've made in a partial view to the main view, have some hidden fields in the main view to hold this data.
<input type="hidden" id="name-holder" />
<input type="hidden" id="age-holder" />
And then when you want to store a value to them, just set the values with jquery:
$('#some-save-button-maybe').click(function(){
$('#name-holder').val($('id-of-name-on-partial').val());
$('#age-holder').val($('id-of-age-on-partial').val());
});
When you click on a the button to show a partial, send the appropriate data to the controller to render in the partial:
$('#load-partial').click(function () {
$.post('MyPartial', { Name: $('#name-holder').val(), Age: $('#age-holder').val() }).done(function (data) {
$('#section-b').html(data);
});
});
Hopefully that's what you need...

Yes there are partial views in MVC, and they are usually belong in the Views/Shared folder of your project and are prefixed with a _ (i.e. _MyPartial.cshtml.
As #AdamHeeg pointed out in the comments, there are many tutorials on the web about this kind of setup and many different ways to achieve what you are after.
Here is roughly how I might tackle it...
HTML
<nav>
#Html.ActionLink("Button 1", "GetSectionB")
</nav>
<section id="sectionB">
<!-- Content here -->
</section>
JavaScript
$('nav a').on('click', function (e) {
e.preventDefault();
$.get(this.href, function (html) {
$('#sectionB').html(html);
});
});
Controller
public PartialViewResult GetSectionB()
{
var vm = new MyViewModel();
//do stuff
return PartialView("_SectionB", vm);
}

Save new ul list order after button click using Jquery ui

I have a ul with several dynamically loaded list items (given by the controller to the view). I'm able to move the list items with the JQuery UI and Ruxable Sortable libraries.
Now I need to save the new list order. I've seen lots of examples with PHP and classic asp.net but I have no experience in them and I really want to focus on razor and C# here. My database is MySQL.
When the user clicks on the submit button all the controller needs to retrieve is the same list but with altered orderpositions. How can I achieve this?
View
<ul class="list-group sortable" id="forumlist">
#{
for (int i = 0; i < Model.Count(); i++)
{
<li id="li"#Model[i].id class="list-group-item">#Model[i].name</li>
}
}
</ul>
<button type="button" class="btn btn-info">Opslaan</button>
So; Is there a way to send the collection of items back to the controller (via HttpPost) with altered index? The Model[i] contains a "orderposition" property which indicates were the item needs to be shown in the list. This is also the property that needs to be adapted.

I fixed it!
So just to clarify the process:
There is a list of items
They are displayed in a OL as li
With the JQuery UI sortable methods the list items are draggable
The user drags the list items
The user saves the new order of the list items
So what I did was this:
I just load the items into the view.cshtml:
Controller:
public ActionResult Items()
{
List<item> items= [METHOD that returns the items]();
return View(items);
}
View
#model List<Models.Items>
#using (Html.BeginForm("UpdateItems", "ItemController", FormMethod.Post, new { id = "updateitemform" }))
{
<ol class="list-group sortable" id="itemlist">
#{
for (int i = 0; i < Model.Count(); i++)
{
<li data-order="#Model[i].position" id="#Model[i].Forum_id" class="list-group-item">item
</li>
#Html.HiddenFor(model => Model[i].Item_id)
#Html.HiddenFor(model => Model[i].position,new { #id = "item"+#Model[i].Item_id })
}
}
</ol>
<button type="button" id="saveneworderbutton" class="btn btn-info">Save this shit!</button>
}
And now the magic: Javascript/jquery!
$(document).on("click", "#saveneworderbutton", function () {
$(".list-group-item").each(function (index) {
var id = $(this).attr("id");
$("#" + "item" + id).val(index);
});
$("#updateitemform").submit();
});
I hope this helps people!

Can you send both information? I mean, you can send two lists, one should be the indexes altered, a list like this:
{2, 5, 3, 8, 1}
Your controller can expect this: (... , int[] alteredList)
Well, a better approach can be create a View Model with a property:
public int[] alteredList { get; set; }
then, you can populate that property in the View, and your controller will be expecting the new Model (that new model is the View Model that you create for this operation)
your controller's action method look like this:
public ActionResult [ListActionMethod](NewViewModel listview)
and your view should change the line:
#model ...NewViewModel

Add an attribute to each li element for example data=<%=i %>
and then access these attribute using $('Your selecter').attr("data")
and check whether it is odd or even

closing the dialog from the child view using jQuery without reloading parent view in MVC3

The scenario I want to implement is stated as follows:
I am using MVC 3 with razor view.
On the click of text box (call it Result Text Box), open a dialog from the Home View (which is a different view, the Add View) and carrying a postback to Home controller action.
On the dialog (which is Add View), simply input two numbers for addition and on its submit, does a post-back on Add view controller action.
Now, when the Add controller action processing completes, I want to do the addition of the numbers and close the current dialog (Add View) and updating the Result Text Box present on the parent view (Home view) with the addition result.
Note: After closing the dialog I dont want the parent view to be reloaded or refreshed.
Now, Where I am facing the problem is how to
1) fetch hidden field value (container addition value) and set to the Result test box on parent page?
2) close the dialog(add view) from the dialog itself? without refreshing the parent view?
code:
<h2> Input numbers to add</h2>
#using (Html.BeginForm("About","Home",FormMethod.Post, new {id = "dialogchildform"}))
{
#Html.Hidden("hdnresult", ViewData["result"], new { id = "hdnres" })
<div style="position: relative; margin-left: 200px; top: 80px">
<fieldset>
#Html.ValidationSummary(true)
<div class="editor-label">
Value 1
</div>
<div class="editor-field">
#Html.EditorFor(model => model.num1, new { id = "num1" })
#Html.ValidationMessageFor(model => model.num1)
</div>
<div class="editor-label">
Value 2
</div>
<div class="editor-field">
#Html.EditorFor(model => model.num2, new { id = "num2" })
#Html.ValidationMessageFor(model => model.num2)
</div>
</fieldset>
<p>
<input type="submit" value="Add and Retrun" id="inputSubmit" />
</p>
</div>
}
<script type="text/javascript">
$(document).ready(function () {
$("#inputSubmit").click(function () {
document.forms('dialogchildform').submit();
// txtParentResult is a Textbox on prent view to be updated
document.getElementById('txtParentResult').value
= document.forms('dialogchildform').hdnres.value;
// not updating the parent textbox
// $(window.document).dialog('close');
//gives error - Microsoft JScript runtime error: Object doesn't support property or method 'dialog'
//$("#mydiag").dialog("close");
// also gives error
//jQuery(".ui-dialog-content").dialog("close");
// again gives error - Microsoft JScript runtime error: Object doesn't support property or method 'dialog'
});
});
</script>
Controller Action:
[HttpPost]
public ActionResult Add(AddNum vAddNum)
{
objAddNum = vAddNum;
int result = objAddNum.AddNumbers();
ViewData["_ActionCloseDialog"] = "true";
ViewData["result"] = result;
return View();
}

Got the solution.
Instead of using the jQuery function on the dialog view, I have used dialog buttons on the parent view itself.
Since, the dialog is defined as global varibale in javascript function on the parent .cshtml and encapsulates child view in the div, has access to controls on both the views.

Not sure if this is what your after but, In the child frame you can set a global variable and then set the controls text in the parent to the vatiable
parent.document.getElementById("").text() = "";
Then you can close the child frame by doing
var child = document.getElementById('childId');
child.document.close()
Hope this helps