We Keep Coding

MVC PartialView Cycles Back to Previous PartialView

I have a MVC Controller with an Index that will cycle through multiple PartialView as the user goes through the form process.
Here is the Index:
#section pageMain {
<div id="partialView">
#Html.Partial("SelectAccount", SUPR.Models.Account.GetAccounts());
</div>
}
This works fine and I get the SelectAccount page just fine.
My issue is that I have an AJAX call that runs when the user selects a row in a table on the SelectAccount page. What is supposed to happen is that the PartialView is then replaced with another PartialView that displays the details of the selected row. This actually does work, but after about 1 second it cycles back to the SelectAccount PartialView with a query string attached, for some reason, to the URL.
Before
After
Here is the code for the AJAX call:
$.ajax({
type: "GET",
url: "/Review/GetReviewView",
data: { profitCenter: profitCenterNo }
}).done(function (data) {
$('#partialView').html(data);
});
The ONLY that is happening in the controller for GetReviewView is that I'm returning the PartialView with the PartialView name and model. This working because, in that brief moment that I can see the ReviewAccount view, the proper data is in the fields.
Any thoughts as to why this odd behavior is occurring?

Are you capturing the event in JS? If you are triggering off of a click event then add the event parameter to the method and then at the end of the method add:
event.preventDefault()
And see if it still happens. It sounds like a client side JS issue, not a C# issue.
The way you are doing this is actually fine. There used to be a Microsoft library called ASP-AJAX or something, don't remember because I didn't use it much. This library basically allowed you to decorate HTML elements with ASP-AJAX-METHOD , ASP-AJAX-REFRESH-TYPE and it would automatically do something similar to what you are doing now. Go to the Server and retrieve a PartialView.

How to dynamically add/delete rows in asp.net mvc? [duplicate]

This question already has an answer here:
Submit same Partial View called multiple times data to controller?
(1 answer)
Closed 6 years ago.
I want to have an "add row" functionality in my asp.net mvc View.
One way I can do it is have n hidden rows and unhide a row each time "add row" is clicked. But then how would I handle serial numbers (each row would have a serial number) when a row is deleted.
I don't want to do it with JS. What would be the best approach. Should I do it from code behind? Any suggestions?

I am not sure why you do not want to do it with javascript and everything on the client side. It would be a better experience for the user and it would be quicker.
However, since you specifically indicated you want to do it in code behind then do this. Create a partial view and put the required html for a new row into it. Then you need to call your controller to serve that html to you from the client side. You can do that using AJAX. Here is how with jQuery:
$.ajax({
type: "GET",
url: "/Home/GetSomePartialView/",
data: someArguments,
success: function (viewHTML) {
$("#someDiv").html(viewHTML);
},
error: function (errorData) { onError(errorData); }
});
The above will get the html and inject it into an element with ID someDiv.
You will need an action in controller to serve the html. Here is some code:
public Action result GetSomePartialView(SomeArgumentModel someArguments)
{
return PartialView("_NewRow");
}

Call a webmethod using Ajax that calls the delete SQL for you and rebinds the grid with the new results in JS.

How to set jquery variable value to Viewbag or ViewData

I will try to make button click event using jquery.
but I do not know way how I can pass jquery variable value in Viewbag or
ViewData

In general handling click event is solved by .click(function()) method or .on('click', function()). After handling the click event and then sending a http POST/GET request to pass the data to your server-side application.
Example snippet would look like:
$('#button-id').click(function(){
// Click handle
$.post("/url/to/controller", $( "#form-id" ).serialize() ); // send data to controller
});
And then handle the input in the controller.

how to avoid postback when i click the button in MVC

I have two button in my cshtml page. When i click the first button data fetch from the database and bind it my controls. The records are many so the second button goes down, then i click the second button same thing happened fetch from the database and bind the grid, so the page is loaded then the page goes up. I want to stay same place when i click the second button. How to prevent it.

make your button like this :
<input type="button" id"button2" onclick="CallAjax();return false;"/>
//then in javascript
function CallAjax()
{
//your ajax call here to retrieve or update data
}

This is MVC 101...
Make your button a standard HTML5 button, which calls a JavaScript function on click...
<input type="button" id="goButton" value="Go »" onclick="goFunction();">
(I don't think you have to "return false" with a button, only with a submit)
Then, use Razor helpers in your view to do the Ajax call to the controller...
function goFunction() {
var url = '#Url.Action("MyActionMethodName", "MyControllerName")';
var settings = { 'some data': 'some values' };
$.ajax(url, settings);
}
See the JQuery Ajax page for more information about how to work the "settings" object.
BTW - sounds like you are "paging a grid" but you just forgot to say so... use a tool for that, such as Kendo. Paging is solved, don't solve it again.

Updating the view with the new data in the viewmodel in MVC3, C#

I have ajax call of action in the controller, after it update the database and it is completed successfully I can do like this:
return PartialView("Overview", mydatamodel);
and then in the the success to do like this:
success: function (data) {
// do something with the data => refresh some
// portion of your DOM
$('#someDivId').html(data);
}
And it would work fine, but what I need is that a collection in the view model to be updated, and the whole view to be rendered again with the new data.
I can do that if for instance I have submit button, then whole view is updated with the new data but if I have ajax call, how can i do that.
Here is link to my previous post where have more details:
MVC3 receiving the new model data after submit
Thank you in advance!

If you want to update the entire view don't use AJAX. Simply use a submit button. The whole point of AJAX is to update only a portion of the view without navigating away from the current page.
By the way you could redirect on the client side using window.location.href:
success: function (data) {
window.location.href = '#Url.Action("Overview", "SomeController")';
}
but there's really no need to do that if you will always redirect in the success AJAX callback. You should not use AJAX in this scenario.

You usually use AJAX precisely for the situations where you only want a portion of the view to be updated after the request completion.
If you, for some reason, need to use AJAX even for such cases (e.g. using a DELETE HTTP verb to send the request), you might do something like
window.location.href = '/Items/123';
in your success callback function, which effectively triggers a full page update.