asp.net MVCでは、コントローラーは、入力されたデータオブジェクトを渡すことにより、モデルの変更をビューに通知します。
public class Customer { public int CustomerID { get; set; } // Unique key public string Name { get; set; } }
ビューでのデータ転送:
[AcceptVerbs(HttpVerbs.Get)] public ViewResult CustomerView() { return View(new Customer { CustomerID = 14, Name = "Papa Carlo"}); }
GiftView.aspxビューで、このオブジェクトの値を表示します。
<%@ Page Title="" Language="C#" MasterPageFile="~/Views/Shared/Site.Master" Inherits="System.Web.Mvc.ViewPage<MyNamespace.Customer>" %> <asp:Content ID="mainContent" ContentPlaceHolderID="MainContent" runat="server"> ID : <%= Html.Encode("CustomerID") %><br/> Name : <%= Html.Encode("Name") %><br/> </asp:Content>
また、asp.net MVCでは、コントローラーのデータ処理メソッドの前にAcceptVerbs属性を使用して、GET要求とPOST要求を別々に使用します。 POSTリクエストに含まれるデータはModelBinderによって処理され、オブジェクトを初期化します。オブジェクトは、データを処理するためのメソッドに入力されます。
[AcceptVerbs(HttpVerbs.Get)] public ActionResult EditCustomer(int idCustomer) { // Customer idCustomer return View(Customer); } [AcceptVerbs(HttpVerbs.Post)] public ActionResult EditCustomer(Customer customer) { if (ModelState.IsValid) { // } return View(customer); }
このコントローラーメソッドのビューはどこにありますか。
<%@ Page Title="" Language="C#" MasterPageFile="~/Views/Shared/Site.Master" Inherits="System.Web.Mvc.ViewPage<MyNamespace.Customer>" %> <asp:Content ID="mainContent" ContentPlaceHolderID="MainContent" runat="server"> <% using (Html.BeginForm()) { %> <%= Html.Hidden("CustomerID") %><br/> Name : <%= Html.TextBox("Name") %><br/> <input type="submit" value="Save" /> <% } %> </asp:Content>
使用するのは非常に便利ですが、動的なフォームに入力する必要がある場合には1つの問題があります。 フィールドを追加するには、JavaScriptを使用します。これにより、フィールドが生成されます。 しかし、タイプされたオブジェクトを取得するためにそれらをサーバーに正しく転送する方法は? この状況にはいくつかの解決策があります。 しかし、最初に、次の形式で作業するオブジェクトを拡張します。
public class Ownership { public string Name { get; set; } public int Price {get; set; } } public class Customer { ... public List<Ownership> Ownerships { get; set; } }
最初の方法:
POST要求のハンドラーメソッドではパラメーターを受け入れませんが、Request.Params(NameValueCollection)プロパティを手動で処理します。
2番目の方法:
POSTリクエストのハンドラーメソッドで、FormCollectionパラメーターを受け入れ、このパラメーターを再度手動で処理します。
3番目の方法:
データ処理のバージョン(ModelBinder)を作成し、特定のタイプのデータを処理に追加します。
しかし、まだ4番目の方法があります-ビューに正しいデータ名を提供し、新しいフィールドの作成を正しく記述し、標準のModelBinderにそれらを処理する作業を提供し、入力でデータが既に入力されたCustomerタイプのオブジェクトを取得します。 したがって、EditCustomerビューは次のとおりです。
<%@ Page Title="" Language="C#" MasterPageFile="~/Views/Shared/Site.Master" Inherits="System.Web.Mvc.ViewPage<MyNamespace.Customer>" %> <asp:Content ID="mainContent" ContentPlaceHolderID="MainContent" runat="server"> <% using (Html.BeginForm()) { %> <%= Html.Hidden("CustomerID") %><br/> Name : <%= Html.TextBox("Name") %><br/> <div class="add-ownership" id="AddOwnership">Add</div> <div id="Ownerships"> <% int index = 0; foreach (var ownership in Model.Ownerships) { %> <div class="ownership-container" id="OwnershipContainer<%= Html.Encode(index) %>"> Name : <%= Html.TextBox("Ownerships[" + index.ToString() + "].Name")%> Price : <%= Html.TextBox("Ownerships[" + index.ToString() + "].Price")%> <div class="remove-ownership">Remove</div> <%} %> </div> <% index++; } %> </div> <input type="submit" value="Save" /> <% } %> // javascript ( . ) <script type="text/javascript"> var OwnershipsCount = <%= Model.Ownerships.Count.ToString() %>; </script> </asp:Content>
ここで、追加のフィールドを追加および削除するためにjqueryを正しく説明します。
$().ready(function() { ///Add/Remove $("#AddOwnership").click(AddOwnership); $(".remove-ownership").click(RemoveOwnership); });
次に、追加する関数について説明します。
function AddOwnership() { // var OwnershipContainer = $("<div/>").attr("class", "ownership-container").attr("id", "OwnershipContainer" + OwnershipsCount).appendTo("#Ownerships"); OwnershipContainer.text(" Name : "); $("<input/>").attr("type", "text").attr("name", "Ownerships[" + OwnershipsCount + "].Name").attr("id", "Ownerships[" + OwnershipsCount + "]_Name").appendTo(OwnershipContainer); OwnershipContainer.text(" Price : "); $("<input/>").attr("type", "text").attr("name", "Ownerships[" + OwnershipsCount + "].Price").attr("id", "Ownerships[" + OwnershipsCount + "]_Price").appendTo(OwnershipContainer); var RemoveButton = $("<div/>").attr("class", "remove-ownership").text("Remove").appendTo(OwnershipContainer); // - RemoveButton.click(RemoveOwnership); OwnershipsCount++; }
標準のModelBinderが配列を正しく処理するためには、配列のインデックスが密接に移動する必要があります。したがって、たとえば、番号4の中間フィールドを削除する場合、その後のすべてを再カウントする必要があります。
function RemoveOwnership() { var RecalculateStartNum = parseInt($(this).parent().attr("id").substring("OwnershipContainer".length)); // div $(this).parent().remove(); for (var i = RecalculateStartNum+1; i < OwnershipsCount; i++) { // name id RecalculateNamesAndIds(i); } OwnershipsCount--; } function RecalculateNamesAndIds(number) { var prevNumber = number - 1; $("#OwnershipContainer" + number).attr("id", "OwnershipContainer" + prevNumber); // "[" "]" id DOM- jquery \\ $("#Ownerships\\[" + number + "\\]_Name").attr("id", "Ownerships[" + prevNumber + "]_Name").attr("name", "Ownerships[" + prevNumber + "].Name"); $("#Ownerships\\[" + number + "\\]_Price").attr("id", "Ownerships[" + prevNumber + "]_Price").attr("name", "Ownerships[" + prevNumber + "].Price"); }
以上です。 したがって、標準のModelBinderは、名前付きフォームフィールドを正しく処理できます。