將View的用戶輸入傳遞給Javascript函數

Question

我有一個要求用戶輸入的view。 View是如下 -

@(Html.Input(m => m.SchoolName).Id("SchoolName")) 
@(Html.Input(m => m.Address).Id("Address")) 
@(Html.Input(m => m.Phone).Id("Phone")) 

<button class="btn btn-primary" name="btnSchoolSave" id="btnSave"> 
      Submit 
</button> 

然後我有一個JavaScript函數，它處理所述click事件按鈕 -

function() { 
      $("button[name='btnSchoolSave']").on('click', function() {     
       $.ajax({ 
          url: '/School/SaveSchool',   //School is my controller and 'SaveSchool' is the method in the controller. 
          contentType: 'application/html; charset=utf-8', 
          type: 'POST', 
          dataType: 'html' 
         }) 
         .success(function (result) { 
          alert("saved") 
         }) 
         .error(function (xhr, status) { 
          alert(status); 
         }) 
      }) 
     }; 

我的控制器的方法是象下面這樣。我還沒有實施該方法。

public void SaveSchool(Models.School model) 
{ 
    //TODO 
} 

我的想法是 - 我想通過查看用戶輸入的所有值，獲得所有這些模型值，並將其傳遞給JavaScript函數，作爲回報，javascript函數傳遞模型控制器方法並保存它。

現在，我知道我可以直接從視圖中調用我的Controller操作方法並獲取所需的數據保存。但是，我的要求是將數據傳遞給JavaScript，並從JavaScript調用方法並保存用戶輸入。

我該怎麼做？

感謝

Answer 1

@model XXX.YourViewModel 

<form id="your-form" style="margin: 0px;"> 
    @Html.AntiForgeryToken() 

    @Html.HiddenFor(m => m.Id) 

    @Html.LabelFor(m => m.SchoolName) 
    @Html.TextBoxFor(m => m.SchoolName) 
    @Html.ValidationMessageFor(m => m.SchoolName) 

    @Html.LabelFor(m => m.Address) 
    @Html.TextBoxFor(m => m.Address) 
    @Html.ValidationMessageFor(m => m.Address) 

    @Html.LabelFor(m => m.Phone) 
    @Html.TextBoxFor(m => m.Phone) 
    @Html.ValidationMessageFor(m => m.Phone) 

    <button id="btnSchoolSave" name="edit" type="button">Save</button> 
</form> 

$("#btnSchoolSave").on('click', function() {     
    //get the form 
    var form = $("#your-form"); 

    //validate form 
    if (!form.valid()) { 
     return; 
    } 

    //serialize the form 
    serializedForm = form.serialize(); 

    //ajax post 
    $.ajax({ 
     url: "@Url.Action("CompanyEdit", "CV")", 
     type: "POST", 
     data: serializedForm 
     ......... 
     ...... 

現在serializedForm將被張貼到您的控制器參數作爲視圖模型

[HttpPost] 
[ValidateAntiForgeryToken] 
public ActionResult SaveSchool(YourViewModel modal) 
{ 
    //find school 
    var school = repository.FindSchool(modal.Id) 

    //map value from modal 
    school.SchoolName = modal.SchoolName; 
    .......... 

    repository.SaveScool(school); 
}