I have a button and a droplist, when I press the button first my partialView is normally replaced.
But when I change an element in the list first and THEN I press the button, my whole page is replaced by my partial.
I checked around and saw that the jquery.unobtrusive was solving that issue for a lot of people but it was already included on my project.
Droplist :
$(document).on("change", ".RefreshList", function () {
$.ajax({
type: "POST",
url: "#Url.Action("RefreshList", "Feuillet")",
data: $("#form0").serialize(),
success: function (response) {
$('#header').html(response);
},
});
});
Controller :
[HttpPost]
public ActionResult RefreshList(CreationModificationFeuillet model, string actionName)
{
return PartialView("~/Views/Feuillet/CreationModification/Partial/Generale/PartialHeaderCreation.cshtml", model);
}
Button :
$("button[value='ContractSearch']").click(function () {
$("#modalMessage").modal('show');
$("#form0").attr("action", "#Url.Action("Creation" + Model.TypeProduit, "Feuillet")").attr("data-ajax-success", "AjaxFunction").attr("data-ajax", "true").attr("data-ajax-update", "#header").attr("data-ajax-mode", "replace");
});
Controller :
...
case "ContractSearch":
// doStuff
return PartialView("~/Views/Feuillet/CreationModification/Partial/Generale/PartialHeaderCreation.cshtml", model);
Related
Good afternoon!
I have the following controller action:
[HttpPost]
public ActionResult ShowComparisonResultSimpleViewFromJs(List<GetDocumentList_Result> documents,
GetAgreementNumberKktShiftInfo_Result infoResult)
{
ViewBag.DisplayName = CurrentUser?.DisplayName;
ViewBag.Documents = documents;
ViewBag.DocumentCount = Convert.ToString(documents.Count());
return View("ComparisonResultSimpleView", infoResult);
}
I also have an InputKktShiftView view that has a button click handler. In it I need to call the controller method specified above, as a result, the ComparisonResultSimpleView page is loaded.
Here is an example of a button click handler:
<script>
function OnClick(s, e) {
//Data for example:
var parameterModel = {
FnFactoryNumber: '1',//'9280440300664345',
ShiftNumber: 38
};
$.ajax({
type: 'POST',
url: '/TaxcomProblems/GetInputKktShiftJsonResult',
data: parameterModel
}).success(function(data) {
if (data.IsValid) {
if (data.InfoResult != null) {
var jsData = {
documents: data.Documents,
infoResult: data.InfoResult
};
//Here you need to call the /TaxcomProblems/ShowComparisonResultSimpleViewFromJs method
//$.ajax({
// type: 'POST',
// url: '/TaxcomProblems/ShowComparisonResultSimpleViewFromJs',
// data: jsData,
// dataType:'html',
// success: function(result) {
// var view = $("ComparisonResultSimpleView");
// view.html(result);
// }
//});
} else {
dxConfirm("Перейти на страницу выбора ККТ?")
.success(function() {
window.location.href = "/TaxcomProblems/ShowChoiceKktView";
});
}
}
});
}
Here is the code for my ComparisonResultSimpleView page:
#using System.Web.UI.WebControls
#using BonusProgramAPI.Tools
#model BonusProgramAPI.EF.GetAgreementNumberKktShiftInfo_Result
#{
ViewBag.Title = "Результаты для ККТ и смены";
ViewBag.agreementNumber = Model?.agreementNumber;
ViewBag.outletId = Model?.outletId;
ViewBag.fnFactoryNumber = Model?.fnFactoryNumber;
ViewBag.openDateTime = Model?.openDateTime.ToString("dd-MM-yyyy hh:mm:ss");
ViewBag.shiftNumber = Model?.shiftNumber;
}
<script>
function OnBtnGetKktInfoClick(s, e) {
pcKktInfo.Show();
}
</script>
#Html.DevExpress().FormLayout(settings =>
{
settings.Name = "rootLayout";
settings.Items.AddGroupItem(group =>
{
#* some code *#
}
}).GetHtml()
#* PopupControls: *#
#{
Html.RenderPartial("PopupControlKktInfoPartialView");
Html.RenderPartial("PopupControlShiftInfoPartialView");
}
Question: How do I call the ShowComparisonResultSimpleViewFromJs method of the TaxcomProblems controller so that the ComparisonResultSimpleView page displays?
P.S.: If I use ajax, then I call the specified method correctly (all data is transferred to it correctly), but the specified page is not displayed, and the current page remains.
Ajax post will not refresh the page. You have to do it by yourself. Also you are sending the full page from the ShowComparisonResultSimpleViewFromJs action with the following code:
return View("ComparisonResultSimpleView", infoResult);
What you can do is make the ShowComparisonResultSimpleViewFromJs action return partial content (html) instead of full page content. And then add the returned data in a div on the success method of the ajax call.
To return partial view write:
return PartialView("~/views/ComparisonResultSimpleView.cshtml", infoResult);
Also in the javascript codes note that the element selector is missing a class or Id notation. You can simply write:
$("#ComparisonResultSimpleView").html(result);
Your jquery selector is attempting to get the element
<ComparisonResultSimpleView></ComparisonResultSimpleView>
from here
success: function(result) {
var view = $("ComparisonResultSimpleView");
view.html(result);
}
Do you mean to select the element with id = ComparisonResultSimpleView ?
<div id="ComparisonResultSimpleView"></div>
You will need to add "#" to your selector like so:
success: function(result) {
var view = $("#ComparisonResultSimpleView");
view.html(result);
}
Want to know if the selector is correct?
Run the following line in your page's browser console
$("#ComparisonResultSimpleView").length; // greater than zero means the number of elements matching selector. Zero means no match.
This is the site.js code I am using to insert the PartialView into the main View.
$("#btn2").click(function () {
$.ajax({
url: "/Home/RefreshDoors",
datatype: "text",
type: "POST",
success: function (data) {
$('#DoorBox').html(data);
},
error: function () {
$("#DoorBox").html("ERROR");
}
});
});
I want to place the resulting table inside a box (div with the id="DoorBox") however as a result I get a raw view of the returned Door-Json-Objects:
(imgur-link to screenshot)
This is the div-code inside the view:
<div id="DoorBox">
</div>
This is the code from the HomeController I use to render the PartialView:
[HttpPost]
public PartialViewResult RefreshDoors()
{
return PartialView("_Doors", RefreshDoorsFunction().Result);
}
How do I get the code to insert the PartialView (just a table with the properties of the door-model displaying the doors)) to render within the div-box (without refreshing the page)?
Edit: Here is the code from the RefreshDoorsFunction():
public async Task<List<NewDoor>> RefreshDoorsFunction()
{
string token = await _auth.GetTokenAsync();
_doorList = SecureRestCall.GetDoorListAsync("https://exampleapi.azurewebsites.net", token);
return _doorList.Result;
}
I got the answer. Turns out I'm just stupid: I used the wrong button to test the ajax function (wrong id assigned to the button). It works now. Sorry for wasting some people's time.
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');
}
I am trying to refresh a partial view grid after changing a record.
I have a button where the user can click on, than it will change a row in the grid. This works OK, however. I have to manually refresh the page to see the modification. Now I thought I could make a new JavaScript Ajax function to do this. So after the user push the button it will load the function RefreshGrid
JavaScript Function:
function RefreshGrid() {
var numberPlate = $("#NumberPlate").val();
if (numberPlate) {
$.ajax({
type: 'get',
url: appPath + '/Service/Grid',
data: { numberPlate: numberPlate },
success: function (response) {
$("#Grid").html(response);
},
error: function (response) {
$("#dialog .modal-body").html(msgErrorDuringRequest);
$("#dialog #dialog-title").html(errorTitle);
$("#dialog").modal("show");
}
});
}
}
Now the controller
public ActionResult Grid(string numberPlate)
{
IList<ServiceOrder> services = ServiceRepository.Services(numberPlate);
return PartialView("_Grid", services);
}
For some reason it is returning me the error function
error: function (response) {
$("#dialog .modal-body").html(msgErrorDuringRequest);
$("#dialog #dialog-title").html(errorTitle);
$("#dialog").modal("show");
}
But I have no idea where it goes wrong. Cant really imagine it is in the controller as I have a familiar function elsewhere which works flawless but perhaps I am missing something.
try code:
Remove The All your jquery code ,just used below the code your RefreshGrid Function
var numberPlate = $("#NumberPlate").val();
var url= '/Service/Grid?numberPlate='numberPlate;
$("#Grid").load(url);
My folder structure looks like this. Both of these folders are contained within the Area folder.
I am trying to call a function from the EmailController inside ITRequests/Scripts/Edit.js and it fails to find it.
The .js code look likes this
$(document).on('change', '#StatusId', function (event) {
event.preventDefault();
debugger;
if(( $('#OldStatus').val() ) != ( $('#StatusId').val()) ) //Aka if the user switched the status on submit
{
var status_description = [$('#OldStatus').val(), $('#StatusId').val()];
$.ajax({
url: "/Email/Email/statusChangeEmail",
type: 'POST',
contentType: "application/json; charset=utf-8",
data: JSON.stringify({ 'request': $('#RequestId').val(), 'status_descriptions': status_description }),
done: function (data) {
debugger;
alert("working");
}
})
}
})
RequestId is a hidden value on the page which is being picked up correctly, likewise the status_description field is taking the correct values and (tries to) pass them to the function.
The function EmailController.cs is defined as such
[HttpPost]
public ActionResult statusChangeEmail(int request, string[] status_descriptions)
{
//stuff happens
return Json(1);
}
However every time this happens I get this error message
Why your URL is /Email/Email/statusChangeEmail? It should be /Email/statusChangeEmail.
The /Email means EmailController and /statusChangeEmail means controller action statusChangeEmail .