如何使用AJAX渲染部分表單元素

我有一個表單，它可以組裝更大表單的各個部分。例如：如何使用AJAX渲染部分表單元素

Html.RenderPartial("Partials/MealPreference", Model);

我想動態地添加表單部分。考慮到我的部分觀點的本質，我也必須一起傳遞模型。在那，我失敗了。

的標記我含網頁：

<div id="additionalPreference"></div> 

<input type="button" value="Add Additional Preference" id="addPreference" /> 


<script> 
    $(document).ready(function() { 
     $('#addPreference').click(function() { 

      $.ajax({ 
       type: "POST", 
       url: '@Html("AddPreference", "Main")', 
      success: function (html) { 
       $(html).appendTo('#additionalPreference'); 
       console.log(html); 
      }, 
      error: function (xhr, ajaxOptions, thrownError) { 
       alert("Error"); 
      }, 
      complete: function() { 
       console.log("End"); 
      } 
     }); 
    }); 
}); 
</script>

我的控制器動作：

[HttpPost] 
public ActionResult AddPreference(FormViewModel model) 
{ 
    if (ModelState.IsValid) 
    { 
     return PartialView("Partials/AdditionalPreference", model); 
    } 
    else 
    { 
     return PartialView("Partials/LoadFailed"); 
    } 
}

的模型是永遠有效。如何將包含頁面的模型傳遞給控制器操作？這似乎是一件很簡單的事情（它可能會在Web窗體中），但是我一直在窒息3個小時。

來源

2013-10-28 mmcglynn

我已經瞭解了更多關於發回信息給控制器的信息，請在下面的回答中看到我的更新，看看是否有幫助 –

對於AJAX調用，你必須構建模型：

$.ajax({ 
    type: "POST", 
    url: '@Url.Action("AddPreference", "Main")', 
    data: { 
     Field1: 'field1', 
     Field2: 'field2' 
    }, 
    success: function (html) { 
     $(html).appendTo('#additionalPreference'); 
     console.log(html); 
    }, 
    error: function (xhr, ajaxOptions, thrownError) { 
     alert("Error"); 
    }, 
    complete: function() { 
     console.log("End"); 
});

確保在Ajax調用匹配的數據段的名稱完全相同模型中的名字，它應該在你的控制器出現填充。

更新：

因爲寫這個答案，我有了更多的瞭解可以通過AJAX來控制發回信息。正如評論裏克戴利則可以透過提交表單回控制器型號：

@Html.Raw(Json.Encode(Model))

我已經發現了序列化和我們使用：

$('form').serialize()

要發送的田野形成回控制器。一種快速，簡單的方式將所有信息發送回來，與後期相似，無需手動構建模型。

來源

2013-10-28 19:59:15

沒有其他方式可以參考模型了嗎？ – mmcglynn

不是我知道通過ajax調用 –

您可以使用以下方法將模型對象序列化到數據屬性：data：@ Html.Raw（Json.Encode（Mod EL）），' –

您需要爲您在ajax請求中調用的控制器添加模型的屬性。在這種情況下，您的AddPreference控制器的參數類型爲FormViewModel。我假設FormViewModel的信息存儲在頁面上。您需要通過data屬性中的那些屬性來獲取ajax請求。

如果你發佈你的FormViewModel屬性，我可以幫助進一步。 Bascially您需要將以下內容：

$（「＃addPreference」）點擊（函數（）{

$.ajax({ 
     type: "POST", 
     url: '@Html("AddPreference", "Main")', 
     data: {id: "123asd", Prop1: myProp1}, 
     success: function (html) { 
      $(html).appendTo('#additionalPreference'); 
      console.log(html); 
     }, 
     error: function (xhr, ajaxOptions, thrownError) { 
      alert("Error"); 
     }, 
     complete: function() { 
      console.log("End"); 
     } 
    });

後模型的詳細信息，並且正在對Ajax請求，我可以在視圖。

來源

2013-10-28 20:06:28 Rafi

如何使用AJAX渲染部分表單元素

回答

相關問題