Обновление содержимого div после отправки формы ajax в asp.net MVC3

Question

<div id="myDiv">
    <ul class="purpose">
    @{ 
        var purpose = CommonMethod.getPurpose("");
        for(int i=0;i<10 && i<purpose.Count();i++)
        {
            <li><a href="#" >@purpose[i].Text</a></li>
        }
     }
    </ul>
</div>

при выборе вышеупомянутой единственной цели из списка ниже будет показана форма ajax для обновления

@using (Ajax.BeginForm("UpdatePurpose", "Admin", new AjaxOptions { UpdateTargetId = "updateDiv" }))
{
    <div  class="profile">
    @Html.Hidden("PurposeID")
    <table>

        <tr>
             <td>Purpose</td>
             <td>:</td>
             <td> width="30%">@Html.TextBox("Description")</td>         
        </tr>
        <tr>
            <td>Admin Password</td>
            <td>:</td>
            <td>@Html.Password("Passwd1")</td>
        </tr>
    </table>
   <input type="submit"  value="submit" />
   </div>
}

После подстановки ниже вызывается действие

[HttpPost]
public ActionResult UpdatePurpose(string PurposeID,string Description, string Passwd1)
{

    if (Request.IsAjaxRequest())
    {
        if (!Membership.ValidateUser(User.Identity.Name, Passwd1))
        {
            ModelState.AddModelError("", "Invalid Admin Password");
        }
        if (ModelState.IsValid)
        {
            var id = Convert.ToByte(PurposeID);
            var pur = db.Purposes.Where(p => p.PurposeID == id).SingleOrDefault();
            pur.Description = Description;

            db.SaveChanges();
            ViewBag.Result = "Data Updated Successfully.";
            return View();
        }
    }
    return View();
}

При отправке вышеуказанной формы ajax Updatepurpose я хочу показать ошибки сообщения проверки, если пароль администратора недействителен, а также я хочу загрузить содержимое myDiv, если modelstate допустимо, и дать пользователю сообщение об успешном обновлении

Answer 1

Удалить Ajax.BeginForm HTML Helper и сделать некоторый рукописный код JQuery. Вы можете сделать любой вид настройки тогда.

Я бы сохранил вашу разметку так (удалил AjaxForm, использовал обычное объявление формы, добавил имя класса css для отправки)

<div  class="profile">
<form>
@Html.Hidden("PurposeID")
<table>
    <tr>
         <td>Purpose</td>
         <td>:</td>
         <td> width="30%">@Html.TextBox("Description")</td>         
    </tr>
    <tr>
        <td>Admin Password</td>
        <td>:</td>
        <td>@Html.Password("Passwd1")</td>
    </tr>
</table>
<input type="submit" value="submit" class="btnSavePurpose" />

И добавить немного JavaScript, как это

<script type="text/javascript">
 $(function(){

    $(".btnSavePurpose").click(function(e){
       e.preventDefault();
       var item=$(this);
       $.post("@Url.Action("UpdatePurpose","Admin")", 
                         item.closest("form").serialize(), function(data){
           if(data.Status=="Success")
           {
             //Let's replace the form with messsage                
             item.closest(".profile").html("Updated Successfully");
           }    
           else
           {
              alert(data.ErrorMessage);
           }

       });   
    });   

 });

</script>

Теперь обновите ваш метод действия, чтобы вернуть JSON данные

[HttpPost]
public ActionResult UpdatePurpose(string PurposeID,string Description, string Passwd1)
{        
    if (Request.IsAjaxRequest())
    {
        if (!Membership.ValidateUser(User.Identity.Name, Passwd1))
        {
            return Json( new { Status="Error",
                               ErrorMessage="Invalid Admin Password"});
        }
        if (ModelState.IsValid)
        {
            var id = Convert.ToByte(PurposeID);
            var pur = db.Purposes.Where(p => p.PurposeID == id).SingleOrDefault();
            pur.Description = Description;

            db.SaveChanges();
            return Json( new { Status="Success"});
        }
    }
    return View();
}

Что он делает, когда пользователь нажимает на кнопку с этим классом CSS, он сериализует форму контейнера и отправляет ее в Action метод. Затем метод действия выполняет свою работу, и если проверка не пройдена, он отправит JSON в следующем формате обратно к клиенту

 { "Status": "Errorr", "ErrorMessage": "Invalid Admin Password"}

Если все в порядке, он выполнит обновление БД и отправит JSON обратно клиенту в этом формате.

 { "Status": "Success"}

И в обратном вызове из ajax(POST) функция, мы проверяем значение Status в JSON и показывать соответствующее сообщение пользователю.

Просто и чисто:)