How to replace div contents with partial view or update its contents depending on what json result will return to ajax?

Question

Well, I have a simple ajax form:

This is MyPartialView

 @using(Ajax.BeginForm("action", "controller", new AjaxOptions { OnBegin = "beginRequest", OnComplete = "completeRequest", HttpMethod = "POST", InsertionMode = InsertionMode.Replace, UpdateTargetId = "div-to-replace" }, })) { <input type="text" id="my-input" /> ... } 

This is the parent view:

 <div id="div-to-replace"> @Html.RenderPartial("MyPartialView") </div> 

In my controller, I:

 [HttpPost] public ActionResult action(Model model) { if (ModelState.IsValid) { // do staff with model // return partial view return PartialView("MyPartialView"); } // else add error and return json result return Json(new {error = "invalid data"}); } 

And my javascript for the full ajax method:

 function completeRequest(data) { var result = $.parseJSON(data.responseText); if (result != 'undefined' && result != null && result.error) { // just display error and not replace all content // attachModelError is my custom method, it just adds vlaidation-error class to inputs, etc. attachModelError("my-input", result.error); return; } // or show returned html (depending on returned model form inputs will be modified: // select box with different items in my case $('#div-to-replace').html(data.responseText); } 

But the problem is that I am empty #div-to-replace if the state of the model is invalid. If the state of the model is fine, everything works fine. If I use a different insert mode, it duplicates the contents of the div before or after the div.

Summary:
I want different InsertionMode behavior depending on json result. I do not need to replace the if (result != 'undefined' && result != null && result.error) data if (result != 'undefined' && result != null && result.error) .

Answer 1

I had to solve this problem somehow a very long time ago. I came up with a simple solution, which today may not be the best solution, but it does its job.

My solution included setting up a controller action that would only display partial with the data that it would need, and my JavaScript request.

FROM#

 MyController: Controller { public ActionResult GetPartialViewAction() { return PartialView("mypartialview", new partialViewModel()); } } 

Javascript

 $.ajax({ url: "/my/getpartialaction/" }).done(function(data) { $("#partialViewDiv").html(data); }); 

HTML

 <div id="partialViewDiv"></div> 

The best solution would be to use the MVVM / MVC JavaScript library, which will allow you to use html templates and only transmit data through your ajax solution. I recommend looking into knockout.js or backbone.js for this more acceptable template.

Answer 2

I have the same problem with C # default ajax forms. I have a solution that might work.

JQuery

 $(function () { var ajaxFormSubmit = function () { var $form = $(this); var options = { url: $form.attr("action"), type: $form.attr("method"), data: $form.serialize(), cache: false } $.ajax(options).done(function (data) { data.replaces.each(function (replace) { $(replace.id).replaceWith(replace.html); }); }); return false; }; $("form[data-ajax='true']").submit(ajaxFormSubmit);}); 

form.cshtml

 @using (Html.BeginForm("Create", "Menu", FormMethod.Post, new { data_ajax = "true" })) {} 

sample model

 public string Id {get;set;} public string Html {get;set;} 

The last thing you need to do in your controller is to return a json result with a list of the model sample, id is the target element for updating, for html you should use a partial view or a view as a string.

To partially view the view [question]: fooobar.com/questions/851931 / ...