Develop Reference

MVC refreshing page after Ajax call to controller

I have the following in my controller:
public async Task < ViewResult > Favourites(string ids) {
// code that fetches book data from API
if (data != null)
{
var bookList = JsonConvert.DeserializeObject < Book[] > (data);
foreach(var book in bookList) {
var matches = new List < bookList > ();
if (bookList.All(book => ids.Contains(book.Id))) {
matches.Add(book);
}
return View("Index", matches.ToArray());
}
}
return View("Index");
}
And this in my view:
<script>
function getFavouriteBooks() {
var ids = JSON.parse(localStorage.getItem("bookIds"));
$.ajax({
type: "POST",
url: '/Home/Favourites',
data: { ids: localStorage.getItem('bookIds') },
success: function (response) {
window.location.href = '/Home/Favourites/' + ids ;
}
});
}
</script>
I don't think window.location.href = '/Home/Favourites/' + ids; is correct but my goal is to reload the page with the View called from my controller (return View("Index", matches.ToArray());) and am not sure how to do this.
The first time the controller is hit the parameter is correctly populated with the data, but the second time it's empty. I know this is because it's empty.
Please can someone explain how to get the View to load after the ajax call with the ids parameter?

Your controller only called by a get request
if you want to get a result from your controller change ajax setting or add HttpPost attribute to your controller.
type: "GET",

The solution was to change the ajax call success part to:
success: function (data) {
$("body").html(data);
}

Redirect to another page after Ajax call?

so this is a hard one for me to try and explain. I have a razor page that when a button is clicked it calls a javascript function which makes an ajax call to a handler in the back end. The handler does some stuff and gets a id that I want to pass to another page. I am trying to use the RedirectToPage function in the back end but the screen never opens. It successfully calls the handler but when the handler does its return, nothing happens. Is there a way to do this?
Here is the javascript/ajax code that gets called from a button being clicked.
#section scripts{
<script>
// Get the account ID Data from the row selected and return that to the program.
function getIDData(el) {
var ID = $(el).closest('tr').children('td:first').text();
var iddata = {
'ID': ID
}
console.log(iddata);
return iddata;
}
// Submit the data to a function in the .cs portion of this razor page.
$('.copybtn').click(function () {
var accountid = JSON.stringify(getIDData(this));
$.ajax({
url: '/Copy_Old_Account?handler=CopyData',
beforeSend: function (xhr) {
            xhr.setRequestHeader("XSRF-TOKEN",
                $('input:hidden[name="__RequestVerificationToken"]').val());
        },
type: 'POST',
dataType: 'json',
data: { offenderid: offenderid },
success: function (result) {
},
});
});
</script>
}
For my code behind code that I am calling from the ajax call, that's below here:
public ActionResult OnPostCopyData (string accountid)
{
// Do my other stuff here
return RedirectToPage("Account_Information", new { id = account.Account_ID });
}
Any help would be appreciated and if doesn't make sense, I can try and clear up any questions.

I think this is what you want, I did something similar in an MVC 5 project and I haven't tested it in Razor Pages yet:
This would be your method, note that you should add your Controller to the Url.Action, and I personally haven't tried passing a parameter along with the url but I image it'll work just fine
[HttpPost]
public ActionResult SubmitSomething()
{
return Json(new { redirectUrl = Url.Action("Account_Information", "YOUR_CONTROLLER_NAME", new { id = account.Account_ID }) });
}
And then this would be your Ajax request, I updated the success portion
// Submit the data to a function in the .cs portion of this razor page.
$('.copybtn').click(function () {
var accountid = JSON.stringify(getIDData(this));
$.ajax({
url: '/Copy_Old_Account?handler=CopyData',
beforeSend: function (xhr) {
xhr.setRequestHeader("XSRF-TOKEN",
$('input:hidden[name="__RequestVerificationToken"]').val());
},
type: 'POST',
dataType: 'json',
data: { offenderid: offenderid },
success: function (result) {
if (result.redirectUrl !== undefined) {
window.location.replace(result.redirectUrl);
} else {
// No redirect found, do something else
}
},
});
});
This isn't tested, so I can only hope that it works for you right now
Edit: Updated the Url.Action to use OP's view names and parameters

Redirect to page returns a 301 response, which will be in the format:
HTTP/1.1 301 Moved Permanently
Location: http://www.example.org/index.asp
To redirect after the ajax call you can redirect to the requested url by:
success: function (result) {
window.location = result.getResponseHeader('Location');
}

Calling a HTTP POST method in a MVC Controller from the View's Javascript & Database saving

I am trying to update a value in my database. When the user presses the update button this script is called.
View Code:
<script>
function scr_UpdateQuote(field) {
var r = confirm("Are you sure you want to update your quote?");
if (r == true) {
var textBox_UserTitle = document.getElementById(field);
*CODE TO POST METHOD HERE*
}
}
</script>
In the controller, the value is then revived and saved into the database. A message is sent back to let the user know their quote was updated.
Controller Code:
[HttpGet]
public ActionResult UpdateQuote(string newQuote)
{
*REPLACE QUOTE IN DATABASE*
ViewBag.QuoteUpdated = "Your Quote has been updated.";
return View();
}
I am having difficulty finding out how to write the code described between the **'s
(For the database part I have a user-id that can be used to identify the row)

You can use form posting like this:
$("#YourForm").submit(function() {
$.post("/YourController/UpdateQuote", $("#YourForm").serialize())
//this will serialize your form into:
// newQuote=someValue&&someOtherVariable=someOtherValue etc.
.done(function(data) {
// do what ever you want with the server response
});
})
or you can use an ajax post:
$.ajax({
type: "POST",
url: "/YourController/UpdateQuote",
data: {newQuote: document.getElementById(field)},
dataType: "json",
success: function(data) {
// do what ever you want with the server response
},
error: function(){
// error handling
}
});
For using the data, assuming you have an DbContext called MyDbContext:
[HttpGet]
public ActionResult UpdateQuote(string newQuote)
{
// get userID somehow, either from session, or pass as another parameter here
using (var dc = new MyDbContext)
{
var quoteToUpdate = dc.QuotesTable.FirstOrDefault(q => q.UserID == userID)
quoteToUpdate.quoteColumn = newQuote;
dc.SaveChanges();
}
ViewBag.QuoteUpdated = "Your Quote has been updated.";
return View();
}

C# property value doesn't get modified within Javascript/ jquery

I initialize a property within the Controller's Constructor.
public BookController()
{
SessionProvider.SessionLoadSceanrio = false;
}
I have an Action Method which reset the property again on a button click event.
public ActionResult LoadScenario(int bookId)
{
SessionProvider.SessionLoadSceanrio = true;
// remaining code
return Json(ScenarioId, JsonRequestBehavior.AllowGet);
}
Following javascript code is in my view which is called when the button is clicked.
var BookHandler = {
$("#btnLoadScen").click(function (e) {
$.ajax({
url: "#Url.Action("LoadScenario", "Book")",
dataType: 'json',
type: 'POST',
data: {
'bookId': BookHandler.getBookId()
},
success: function (response) {
var scenarioId = response;
var isLoadScenario = "#Portal.Presentation.Web.Planning.MVC.App_Start.SessionProvider.SessionLoadSceanrio";
//otherproperties
window.open("#Url.Action("Index", "BookScenario", new {loadScenario = "_loadScenario"}).replace('_loadScenario', isLoadScenario), tabId);
},
error: function () {
}
});
});
}
My problem is when I click the button, value of property changes in the Controller. But it doesn't change in my javascript code.Please see the screen capture of the developer tool.
does Anyone has a clue on this?

You are using the razor syntax. then initially page loaded , values are set, and these values are string , not a variable anymore. then you can't get session value updated again.
please get session value from an AJAX call and set to your variable.

The code below will only be evaluated once you get the view from server and will not be re-evaluated after your ajax call.
var isLoadScenario = "#Portal.Presentation.Web.Planning.MVC.App_Start.SessionProvider.SessionLoadSceanrio";
In order to do what you intended, you will need to return SessionLoadSceanrio in your response.
You can do it like:
public ActionResult LoadScenario(int bookId)
{
SessionProvider.SessionLoadSceanrio = true;
// remaining code
return Json(new {ScenarioId, SessionLoadSceanrio = SessionProvider.SessionLoadSceanrio}, JsonRequestBehavior.AllowGet);
}

Returning view from jQuery AJAX get operation

I'm trying to make an asynchronous jQuery get to an MVC Action to return a view. For some reason, although it accesses the action, it does not render the view.
This is the jQuery:
function showArchive(url) {
var moreRecentThanDate = $("#chooseDate").val();
$.get(url, { moreRecentThan: moreRecentThanDate });
}
and this is the action :
[HttpGet]
public ActionResult ShowArchive(DateTime moreRecentThan)
{
List<NewIndexViewModel> model = Service.GetArchives(moreRecentThan);
ViewBag.IsArchive = true;
return View("Index", model);
}
PS: I call this jQuery from an ad-hoc modal popup;

You should attach the result in somewhere using a syntax like that:
$.get(url, { moreRecentThan: moreRecentThanDate }).done(function(data) {
$('.result').html(data);
)};

When in doubt, check the jQuery documentation, get(), the second last example is what you want, I believe..
$.get(url, { moreRecentThan: moreRecentThanDate })
.done(function(data) {
$('#myElem').append(data);
// or $('#myElem').html(data);
});

Jquery Part
$.get( url, { moreRecentThan: moreRecentThanDate }, function(data) {
// callback or response
$('#details_Div').replaceWith(data);
});
where the user controller has an action named details that does:
public ActionResult Details( int id )
{
//create a model
return PartialView( "UserDetails", model );
}
PartialView is important here.
This is assuming that your partial view is a container with the id detailsDiv so that you just replace the entire thing with the contents of the result of the call.
UserDetails partial view
http://evolpin.wordpress.com/2011/04/26/asp-net-mvc-partial-view-and-ajax-real-world-example/
<div id="details_Div">
<HTML will be replaced once the ajax is completed>
</div>