CODEWITHSUNDEEP
c#asp.net-mvcjsonjquery
Dmytro
Dmytro

Reputation: 17196

How to replace div's content by partial view or update it's content depending on what json result returns on ajax complete?

Well I have 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 parent view:

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

In my controller I have:

[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 on ajax complete 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 I have empty #div-to-replace if model state is invalid. If model state is ok every thing works fine. If I use different insertion mode it creates duplicates of div's content before or after div.

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

Upvotes: 4

Views: 19725

Answers (2)

Itanex
Itanex

Reputation: 1714

I had to solve this problem once so very long ago. I came up with a simple solution, which today, may not be the best solution but it gets the job done.

My solution involved setting up a controller action that would render just the partial with data that it would need and have my JavaScript request it.

C#

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>

A better solution would be to use a MVVM/MVC JavaScript library that would allow you to leverage html templates and only have to transmit the data over your ajax solution. I recommend looking into knockout.js or backbone.js for this more accepted pattern.

Upvotes: 6

Joost
Joost

Reputation: 62

I have the same problem with the default c# ajax forms. I have a solution what 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" }))
{}

model sample

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

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

For render view to partial see [question]: https://stackoverflow.com/questions/434453

Upvotes: 1

Related Questions