Ajax.BeginForm refresh partial..?

Question

Okay so, I have a form that is posting using ajax...

<% using(Ajax.BeginForm(new AjaxOptions() { OnBegin="onBegin", OnSuccess = "onSuccess", OnFailure="onFailure"  })) { %>

On the server side I am passing back from the controller a Json object. Now, when the OnSuccess event fires I can get to the Json object by using "result.get_response().get_object()"...

My question is, I need to be able to refresh a partial on the page with a list of items that are in the Json object...

Thoughts on how I can do this..?

Answer 1

create the user control for the list of items to be displayed and render it as partial by passing the json data to the UC. This will refresh partially

Answer 2

Use jQuery, and spin through the returned JSON object, building whatever you like.

Example:

  $.each(json, function(i, item) {
        //Add a dinner to the list on the right
        $('#dinnerList').append($('<li/>')
            .attr("class", "dinnerItem")
            .append($('<a/>').attr("href", "/Dinners/Details/" + item.ID)
            .html(item.Name)).append("SomeThing"));
    });

Answer 3

i think the following code you can understand.

first, create a ajax form with - RefreshAjaxList: the name ajax action of current controller. - string.empty (optional) - ajax option. - id of form (optional) - when click status, we will edit the status call server to update the status. - after edit the status, we call submit button to call RefreshAjaxList. the button is "display:none" - in this example, i have one controller: AjaxController with 2 actions:

enter code here
    public ActionResult UpdateStatus(int contactId, Status contactStatus)
    {
        ContactRepository repo = new ContactRepository();
        repo.UpdateStatus(contactId, contactStatus);
        return Json("success:true");
    }
    [AcceptVerbs(HttpVerbs.Post)]
    [ActionName("RefreshAjaxList")]
    public ActionResult RefreshContact()
    {
        ContactRepository repo = new ContactRepository();
        IList<Contact> list = repo.List();
        return PartialView("AjaxUc/AjaxList", repo.List());
    }

var status = { active: 1, inactive: 0 }; function editStatus(cell, id, active) { if (active) cell.innerHTML = "Active" + "Inactive"; else cell.innerHTML = "Active" + "Inactive"; }

function updateStatus(radio, id, active) {
    if (radio.checked != active) {
        if (confirm("Do you want to change the status of the contract?")) {
            if (active)
                cStatus = status.active;
            else
                cStatus = status.inactive;
            $.ajax({
                url: 'Ajax/UpdateStatus',
                dataType: "json",
                data: { contactId: id, contactStatus: cStatus },
                success: function(html) {
                    jQuery("#divAjaxList").submit();
                },
                error: function(request, desc, ex) {
                    alert(desc);
                }
            });
        }
    }
}

<% using (Ajax.BeginForm("RefreshAjaxList", "abc", new AjaxOptions() { UpdateTargetId = "divContent" }, new { @id = "divAjaxList" })) {%>

Id FirstName LastName Phone Email Status | , );">

<% } %>

for more info, mail to [email protected] for further discussion.

hope this can help u.

Answer 4

You can also use JTemplate to render JSON data