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> 

その後、私はボタンのclickイベントを処理するJavaScript関数、持っている -

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); 
         }) 
      }) 
     }; 

を私のコントローラメソッドは、以下のようなものです。私はまだ方法を実装していない。私は、これらすべてのモデルの値を取得し、JavaScriptの機能と引き換えにJavaScript関数に渡しビューでユーザーが入力したすべての値を取得したいコントローラメソッドにモデルを渡す -

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

私の考えですそれを保存します。

今、コントローラのアクションメソッドをビューから直接呼び出して、処理したデータの保存を取得できることはわかっています。しかし、私の要件は、データを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は、各入力値を読み、あなたのC＃クラスの構造に一致するjsオブジェクトを構築し、AJAX経由で送信ViewModelに

[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); 
}