I am making an ajax call to controller to post data from view to controller.And in the receiving controller I am updating my model with new values.Now I want to bind this new model to view again in success call of $.ajax post.Please Suggest.
one way to do this is to return a partial view from the controller. You can replace the contents of your previous view with the new html content. Lets expand on this...
so, here is your controller action
[HttpPost]
public ActionResult SomeMethod(params...){
....
var model = some model;
...
return PartialView("ViewName",model);
}
and in the ajax, use
$.ajax({
url : #Url.Create("Action","Controller"),
type : 'POST',
data: { ... your data params ..},
success : function(result){
$("#ContainerId").html(result);
}
})
in the html you would need a div with the id = "ContainerId". The content would get swapped out by the html passed back in the success function.
The Model is only used in RAZOR when rendering the page. Once you get to the point where you are using AJAX, the model is no longer available to you.
What, exactly, are you trying to accomplish? Maybe there is another way to do it?
Related
In using Razor pages, it is simple to use partial using #Html.Partial(..).
However, when a drop down changes, I want to refresh part of the view - the part rendered by the partial view.
I have searched lots, and found answers such as: https://github.com/aspnet/Razor/issues/2073 where they say partials are meant for code behind.
Is there a reasonable workaround such that I can re-render a subset of the view which is defined in a partial view? What is the best practice way of achieving this?
Yes,
Have an action method that can be called to reload just the partial view:
public ActionResult Reload()
{
return PartialView("NameOfPartialView");
}
Get it from the client (I'll use jQuery):
$.ajax({
type: "post",
url: "Reload",
data: {},
success: function(d) {
//d is the HTML content returned from the Action Method
$("#parentelementaroundinnerdata").html(d);
}
});
Returning the partial view from the action method returns an HTML string, and that can be injected into the page using a parent element to replace its contents with the update. That means when rendering the original, have the setup as the following:
<div id="parentelementaroundinnerdata">
#Html.Partial("NameOfPartialView")
</div>
You can use the same partial from an AJAX request and for loading an initial result - sometimes you have to be careful within the partial on what is going on because of that though...
I want to render a cakephp3 template by ajax and inject the html into a loaded page (without reloading the page).
According to
CakePHP 3 and partial View update via Ajax - How it should be done?,
the idea can be
Create dedicated template (*.ctp) file for every ajax action, render
it like any other action but without the main layout and inject the
HTML (kind of variant 1 but with separated VC logic).
It also provides a partial example code:
public function ajaxRenderAuditDetails($id = null)
{
if ($id == null) {
return null;
}
if ($this->request->is("ajax")) {
$this->set("result", $this->viewBuilder()->build()->cell("audits", [$id]));
}
}
May anyone suggest a full example?
For this you have to use a Ajax call for get data from server. In term of CakePhp you will call a controller function using Ajax. This function call a ctp file which render your partial view. Success function of Ajax should updated or append the partial view. A complete example code for this process is here -
Ajax code for call controller function -
$.ajax({
dataType: 'json',
url: basepath/controllername/controllerfunction,
type: "POST",
dataType : 'html',
success: function (data) {
$(selector).html(data);
}
});
public function ajaxRenderAuditDetails($id = null){
$this->viewBuilder()->layout(false);
if ($id == null) {
return null;
}
if ($this->request->is("ajax")) {
$this->set("result", $this->viewBuilder()->build()->cell("audits", [$id]));
}
}
Put your required html or logics in ctp file.
This is not a running code. It is sample example for updating partial view in CakePhp.
What is the equivalent for success function when I am using [HttpPost] in MVC instead of ajax calls
in ajax, for calling controller in MVC I use something like
$.ajax({
url: '#Url.Action("SomeConroller", "ActionName")',
dataType: 'html', //be sure to use html dataType
contentType: 'application/json; charset=utf-8',
success:someFunctionName
});
I stopped using ajax calls and started using ajax and started using [HttpPost] so that all input type="submit" will come to that and i will handle the events to be done.
Now there is a scenario where I am selecting and moving an item to a different list, and after its done i am doing a this.RedirectToAction("ActionName", "ControllerName");
The problem is, once it is done how can i alert that it is moved? if it is ajax i will handle it in success function. Where can i handle that here?
Since you are redirecting to another action, the page will refresh. If you want to display an alert on new page, the action view can display it with the data you pass to the view.
So something like this should give action data that it pass to the view:
return RedirectToAction("TargetAction", "Controller", new {id = userId});
The "TargetAction" will prepare a view model object and return a view with the view model:
return View(viewModel);
View will have logic to display a alert with custom text. E.g. if you want to display javascript alert on load, just define
$(document).ready(function () {
alert("Item moved: " + '#Model.Id');
});
Is it possible to insert a view using javascript?
I wish to perform an ajax call, get the data, then insert a view in to a page and provide the data from the ajax call to that view?
Is this possible?
Yes you can use the render method on a view. Like so;
$view = View::make('your.view')->render();
And then return the html (which is the output) from your controller method by returning the data stored in $view.
If you need to add any data to the view just add the second parameter to the view make.
alternatively you can do this,
set the route for pages you want to call.
e.g.,
Route::get('callajax','PagesController#showAjax');
and then in PagesController#showAjax you return the view.
e.g.,
public function showAjax()
{
return View::make('ajaxpages');
}
and then in ajax call you code this
$.ajax({
url:'callajax',
});
I have a controller that has an ajax function and a seperate action that redirects the page. I want to know is it possible to make the ajax call when the link is clicked, but wait for the function to finish before the redirect action is called?
E.g.
<g:link controller="myController" action="myRedirectAction" before="saveData">link</g:link>
EDIT Added code
controller
def ajx_saveServiceGroup = {
//Code to save data to object
return
}
def saveConfigToRoLo = {
//code to save object to DB
redirect(action:"displayPDFSummary", id:orderId, params: [origSessionId: params.origSessionId, theSession: tempSession])
}
gsp
<g:link class="buttonSend" action="saveConfigToRoLo" id="${orderDataInstance.id}" params="[origSessionId: origSessionId, orderId: orderDataInstance.id, submitToBT: true]" before="ajx_saveServiceGroup">Submit</g:link>
you can have a remoteLink and then onSuccess callback you can change the windows.location to whatever you want !
A details description of what you are trying to achieve will help us provide better answers.