1 
<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>
}

Subting below アクションが呼び出された後

[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 を送信する際に、管理者パスワードが無効な場合は検証メッセージ エラーを表示し、modelstate が有効な場合は myDiv コンテンツを読み込み、ユーザーに更新成功メッセージを表示したい

4

1 に答える 1

2

Ajax.BeginFormHTML ヘルパーを削除し、手書きの 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>

Action メソッドを更新して、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"}

問題がなければ、DB の更新を行い、JSON をこの形式でクライアントに送り返します。

 { "Status": "Success"}

out 関数のコールバックでは、 inajax(POST)の値をチェックし、適切なメッセージをユーザーに表示しています。StatusJSON

シンプル＆クリーン:)

于 2012-08-03T13:23:57.077 に答える