山岸  英樹

山岸 英樹

1633962360

MVC 3でのHtml.BeginForm() とAjax.BeginForm()の操作

「BeginForm()」は、応答に開始「<form>」タグを書き込む拡張メソッドです。「BeginForm()」は、HtmlHelperクラスとAjaxHelperクラスの両方の拡張メソッドです。HtmlHelperクラスインスタンスとAjaxHelperクラスインスタンスの両方からMVCFormオブジェクトを返すため、大きな違いはありませんが、AjaxHelperメソッドはJavaScriptを使用してフォームを非同期に送信します。

BeginForm()拡張メソッドには、次の2つのタイプがあります。

  • Html.BeginForm()
  • Ajax.BeginForm()

この記事では、「Html.BeginForm()」と「Ajax.BeginForm()」の両方の動作について説明しますが、これらは同じであり、同じMvcFormオブジェクトを返します。両方の方法のポストバック動作を説明するために、製品登録用のアプリケーションを作成します。それを段階的に見てみましょう。

ステップ

1MVCアプリケーションを作成する

ステップ2モデル

を作成するプロジェクトオブジェクトの値を格納するためのさまざまなプロパティを持つProductのモデル(実際にはクラス)を作成します。製品モデル( "ProductModel.cs")は次のとおりです。 

using System.Collections.Generic;  
using System.Web.Mvc;  
using System.ComponentModel.DataAnnotations;  
   
namespace FormTypesMvcApplication.Models  
{  
    public class ProductModel  
    {  
        public ProductModel()  
        {  
            Category = new List<SelectListItem>();  
            Category.Add(new SelectListItem  
            {  
                Text = "Books",  
                Value = "1"  
            });  
            Category.Add(new SelectListItem  
            {  
                Text = "Mobiles & Tablets",  
                Value = "2"  
            });  
            Category.Add(new SelectListItem  
            {  
                Text = "Laptops & Accessories",  
                Value = "3"  
            });  
        }  
         
        public int ProductId { get; set; }  
        [Required]  
        public string Name { get; set; }         
        public string Description { get; set; }  
        public string Manufacturer { get; set; }         
        [RegularExpression(@"^\$?\d+(\.(\d{2}))?$")]  
        public decimal BasePrice { get; set; }  
        public IList<SelectListItem> Category { get; set; }  
        public int CategoryId { get; set; }  
    }  
}  

これで、ビューにバインドされる製品モデルができました。

ステップ4コントローラーの

作成ビューとフォーム送信データを返すアクションメソッドを定義する製品コントローラーを作成します。ここでは、コントローラー( "ProductController.cs")を作成します。

 

Html.BeginForm()の操作


ステップ1

コントローラでアクションを作成して、UIにビューをロードします。空のモデルでビューを返すActionResultリターンタイプアクションメソッドを作成します。このアクションメソッドは、ブラウザからリクエストを行うたびにビューを読み込みます。アクションメソッドは次のとおりです。

public ActionResult ProductHtml()  
{  
    ProductModel model = new ProductModel();            
    return View(model);  
}  

ステップ2ビューの

作成Html.BeginForm()メソッドを使用してフォームを作成するProductモデルを使用して、強く型付けされたビューを作成します。BeginForm()メソッドは、開始「<form>」タグを書き込むHtmlHelperクラスの拡張メソッドであり、終了「</ form>」タグを書き込む「Dispose()」メソッドも呼び出します。MvcFormクラスはIDisposableインターフェイスを実装しているため、IDisposableインターフェイスのDispose()メソッドを呼び出して、MvcFormクラスオブジェクトを破棄できます。次のようにMvcFromを作成します。

@{         
    MvcForm mvcForm = Html.BeginForm();      
    <div>My Html Form</div>       
    mvcForm.Dispose();  
}  

そして、そのコードは、ロードされたときにブラウザの開始「<form>」タグと終了「</ form>」タグにレンダリングされます。次のように、ブラウザでソースコードを取得します。

<form action="/Product/ProductHtml" method="post">  
    <div>My Html Form</div>       
</form>  

ここで、アクションとメソッドタイプのプロパティには値があります。メソッドタイプは「post」であるため、Productコントローラーの「ProductHtml()」アクションメソッドは、postリクエストを処理するフォーム送信で呼び出されます。
次のように、同じコードを記述して、開始<form>タグと終了</ form>タグの両方を作成できます。
 

@using(Html.BeginForm())  
{      
    <div>My Html Form</div>  
}  

次に、UIにデータを表示するビュー(ProductHtml.cshtml)を作成し、そのコードは次のとおりです。
 

@model FormTypesMvcApplication.Models.ProductModel  
@using System.Web.Mvc.Html;  
   
@{  
    ViewBag.Title = "Product Master HTML";  
}  
   
<h2>Product Master</h2>  
   
<fieldset>  
    <legend>Product</legend>          
     
@using (Html.BeginForm())  
{  
     <div class="formRowContainer">  
        <div class="labelContainer">Name</div>  
        <div class="valueContainer">  
            @Html.TextBoxFor(model => model.Name)  
            @Html.ValidationMessage("Name")  
        </div>  
     </div>  
    <div class="clearStyle"></div>  
    <div class="formRowContainer">  
        <div class="labelContainer">Description</div>  
        <div class="valueContainer">@Html.TextBoxFor(model => model.Description)</div>  
    </div>  
    <div class="clearStyle"></div>  
    <div class="formRowContainer">  
        <div class="labelContainer">Manufacturer</div>  
        <div class="valueContainer">@Html.TextBoxFor(model => model.Manufacturer)</div>  
    </div>  
    <div class="clearStyle"></div>  
    <div class="formRowContainer">  
        <div class="labelContainer">Price</div>  
        <div class="valueContainer">  
            @Html.TextBoxFor(model => model.BasePrice)  
            @Html.ValidationMessage("BasePrice")  
        </div>  
    </div>  
    <div class="clearStyle"></div>  
     <div class="formRowContainer">  
        <div class="labelContainer">Category</div>  
        <div class="valueContainer">  
            @Html.DropDownListFor(model => model.CategoryId, Model.Category, "--Select--")  
        </div>  
    </div>  
    <div class="clearStyle"></div>  
    <div class="buttonContainer">  
        <button>Add Product</button>     
    </div>  
}  
</fieldset>  

ステップ3フォームの送信

処理するアクションの作成フォームが送信されると、Postメソッドが実行されることがわかっています。「BeginForm()」メソッドでは、アクションとコントローラー名を渡さなかったため、デフォルトのアクションメソッドは、ビュー名としてアクションメソッドが呼び出されてデータリクエストの投稿を処理することを意味します。そのため、フォーム送信時にUIに表示されるコンテンツにフォームデータを返すアクションを作成します。

[HttpPost]  
public ActionResult ProductHtml(ProductModel model)  
{  
    if (ModelState.IsValid)  
    {  
      System.Text.StringBuilder sb = new System.Text.StringBuilder();  
  
       sb.Append("Product Name :" + model.Name + "</br/>");  
       sb.Append("Description :" + model.Description + "</br/>");  
       sb.Append("Manufacturer :" + model.Manufacturer + "</br/>");  
       sb.Append("Price :" + model.BasePrice + "</br/>");  
       sb.Append("Category :" + model.Category[model.CategoryId-1].Text);  
        return Content(sb.ToString());  
    }  
    else  
    {  
        return View(model);  
    }  
}  

これでプロセスの準備が整い、アプリケーションが実行されます。 

MVC1.jpg

送信ボタン「製品の追加」をクリックすると、すべてのフォームデータが送信され、ポストバックのために同じURLの別の画面に結果が表示されます。

MVC2.jpg

 

Ajax.BeginForm()の操作


ステップ1コントローラでアクションを作成してUIにビューをロードします

空のモデルでビューを返すActionResultリターンタイプメソッドを作成します。このアクションメソッドは、ブラウザからリクエストを行うたびにビューを読み込みます。アクションの方法は次のとおりです。

public ActionResult ProductAjax()  
{  
    ProductModel model = new ProductModel();  
    return View(model);  
}  

ステップ2ビューの作成

「Ajax.BeginForm()」を使用すると、JavaScriptを使用してフォームが送信されます。共有レイアウトとして「_Layout.cshtml」を使用しているため、JavaScriptファイル「jquery.unobtrusive-ajax.min.js」参照を追加して、ポストバックでajaxフォーム送信リクエストを処理します。

<script src="@Url.Content("~/Scripts/jquery.unobtrusive-ajax.min.js")" type="text/javascript"></script>  

次に、リクエストを処理するために、「<appSettings>」セクションの下のweb.configファイルのキーとして「UnobtrusiveJavaScriptEnabled」を追加します。
 

<appSettings>  
    <add key="webpages:Enabled" value="false" />  
    <add key="ClientValidationEnabled" value="true"/>  
    <add key="UnobtrusiveJavaScriptEnabled" value="true"/>  
</appSettings>  

次に、Ajaxフォームを持つビューを作成します。Ajax.BeginForm()メソッドには3つの引数があり、これらはactionName、controllerName、およびAjaxOptionsです。コントロールIDの値を持つAjaxOptionsオブジェクトのUpdateTargetIdプロパティを使用しており、POSTリクエストの後に応答が表示されます。次のコードでは、結果データがそのdivに表示されるように、dividを渡します。
 

@model FormTypesMvcApplication.Models.ProductModel  
   
@{  
    ViewBag.Title = "Product Master Ajax";  
}  
   
<h2>Product Master</h2>  
   
<fieldset>  
    <legend>Product</legend>     
@using (Ajax.BeginForm("ProductAjax", "Product", new AjaxOptions { UpdateTargetId = "Productresult" }))  
{  
    <div id="Productresult"></div>  
     <div class="formRowContainer">  
        <div class="labelContainer">Name</div>  
        <div class="valueContainer">  
            @Html.TextBoxFor(model => model.Name)  
            @Html.ValidationMessage("Name")  
        </div>  
     </div>  
    <div class="clearStyle"></div>  
    <div class="formRowContainer">  
        <div class="labelContainer">Description</div>  
        <div class="valueContainer">@Html.TextBoxFor(model => model.Description)</div>  
    </div>  
    <div class="clearStyle"></div>  
    <div class="formRowContainer">  
        <div class="labelContainer">Manufacturer</div>  
        <div class="valueContainer">@Html.TextBoxFor(model => model.Manufacturer)</div>  
    </div>  
    <div class="clearStyle"></div>  
    <div class="formRowContainer">  
        <div class="labelContainer">Price</div>  
        <div class="valueContainer">  
            @Html.TextBoxFor(model => model.BasePrice)  
            @Html.ValidationMessage("BasePrice")  
        </div>  
    </div>  
    <div class="clearStyle"></div>  
     <div class="formRowContainer">  
        <div class="labelContainer">Category</div>  
        <div class="valueContainer">  
            @Html.DropDownListFor(model => model.CategoryId, Model.Category, "--Select--")  
        </div>  
    </div>  
    <div class="clearStyle"></div>  
    <div class="buttonContainer">  
        <button>Add Product</button>     
    </div>  
}  
</fieldset> 

ステップ3

フォーム送信を処理するアクションの作成フォームが送信されると、Postメソッドが実行されることがわかっています。「BeginForm()」メソッドでは、アクション名とコントローラー名を渡して、データ後のリクエストを処理するアクションメソッドが呼び出されるようにしました。そのため、フォームの送信時にUIに表示されるコンテンツにフォームデータを返すアクションが作成されます。

[HttpPost]  
public ActionResult ProductAjax(ProductModel model)  
{  
    if (ModelState.IsValid)  
    {  
        System.Text.StringBuilder sb = new System.Text.StringBuilder();  
        sb.Append("Product Name :" + model.Name + "</br/>");  
        sb.Append("Description :" + model.Description + "</br/>");  
        sb.Append("Manufacturer :" + model.Manufacturer + "</br/>");  
        sb.Append("Price :" + model.BasePrice + "</br/>");  
        sb.Append("Category :" + model.Category[model.CategoryId-1].Text);  
        return Content(sb.ToString());  
    }  
    else  
    {  
        return View(model);  
    }  
}  

これでプロセスの準備が整い、アプリケーションが実行されます。

MVC3.jpg

すべてのフォームデータを送信する送信ボタン「製品の追加」をクリックすると、divの同じ画面に結果が表示されます。したがって、結果はフォームデザインの次の画面に表示されます。

MVC4.jpg

結論

この記事では、HtmlフォームとAjaxフォームの両方、およびこれらのフォームがポストバックでどのように機能するかについて学習しました。アプリケーションの要件に従って、両方のフォームを使用できます。

リンク: https://www.c-sharpcorner.com/UploadFile/3d39b4/working-with-html-beginform-and-ajax-beginform-in-mvc-3/

#html #aspdotnet 

What is GEEK

Buddha Community

MVC 3でのHtml.BeginForm() とAjax.BeginForm()の操作

navin prakash

1607084960

MVC Framework - Introduction

The Model-View-Controller (MVC) is an architectural style dividing an application into three main system elements: the model, the view, and the controller. Every one of these elements is designed to manage particular aspects of an application’s growth. To build scalable and extensible projects, MVC is one of the most commonly used industry-standard web design platforms.
MVC Elements
Following are the elements of MVC:
Model
All the data-related logic that the user works with corresponds to the Model part. It can represent either the data that is being transmitted between the elements of the View and Controller or some other data relevant to business logic. A customer object, for example, retrieves customer information from the database, manipulates it and updates its data back to the database, or utilizes this for information rendering.
View
For all of the application’s UI logic, the View element has been used. For example, all the UI elements such as text boxes, dropdowns, etc. That the final user communicates with will be included in the Customer’s perspective.
Controller
In order to manage all business rules and incoming requests, controllers serve as an interface between the Model And View elements, modify data using the Model component, and communicate with the Views to make the final performance. For example, the Customer Controller will handle all the Customer View interactions and inputs, and the database will be modified using the Customer Model. To display customer information, the same controller will be used.
ASP.NET MVC:
ASP.NET supports three main growth models: Web sites, Web Forms and MVC (Model View Controller).
ASP.NET MVC Features
ASP.NET MVC provides the following characteristics :

  • Ideal for designing applications that are complex but lightweight.
  • It offers an expandable and pluggable system that can be quickly replaced and customized. If you do not want to use the built-in Razor or ASPX View Engine, for instance, you can use some other third-party display engines or even customize existing ones.
  • Using the application’s elements-based architecture by logically breaking this into elements of the Organization, Display, and Controller. This allows developers to control the scope and focus on specific elements of large-scale projects.
  • The MVC structure enhances the app’s test-driven growth and testability since all elements can be programmed utilizing mock objects based on the interface. Hence, ASP.NET MVC Platform is suitable for Projects with a wide team of web designers.
  • Supports all the comprehensive ASP.NET features currently available, such as Authorization and Authentication, Master Pages, Data Linking, User Controls, Memberships, ASP.NET Routing, etc.
  • Don’t use View State definition (which is present in ASP.NET). This helps to create lightweight apps and allows the designers full power.
    You should also recognize the MVC System as a major structure built on top of ASP.NET that offers a wide range of added features focused on component-based creation and checking. MVC Training in Chennai is the best for freshers and professional workers. FITA is the NO.1 Training Institute to learn MVC Course in Chennai with certification. This Certification very usefu to get a job in the IT industry.

#mvc course in chennai #mvc #mvc training in chennai #mvc training #mvc course

Obie  Beier

Obie Beier

1625660460

Learn MVC 5 & MVC Core with Angular

Learn MVC 5 & MVC Core with Angular @ 1990INR/30USD
https://www.questpond.com/angular-with-mvc-core-combo-package/cid61

Following the Syllabus covered in this Package:
*Learn Angular 7.X, 8.X Step By Step.
*Angular Interview Q & A.
*Learn MVC 5 in 2 days.
*Learn MVC core in 4 hours.
*MVC Core Training Recording.

For more details contact questpond@questpond.com OR call +919967590707-9619842789.

#mvc 5 & mvc #angular #mvc #mvc 5

Rusty  Bernier

Rusty Bernier

1597321578

Razor Pages vs MVC - Which one is better for your project?

In this article, I will discuss Razor Pages vs MVC on how to choose in ASP.NET Core web applications. You will also see which type of web application is well suited for your project or requirement by looking at benefits and code comparison.

#.net core #.net core razor pages vs mvc #mvc vs razor pages #razor pages vs mvc #razor pages vs mvc how to choose

山岸  英樹

山岸 英樹

1633962360

MVC 3でのHtml.BeginForm() とAjax.BeginForm()の操作

「BeginForm()」は、応答に開始「<form>」タグを書き込む拡張メソッドです。「BeginForm()」は、HtmlHelperクラスとAjaxHelperクラスの両方の拡張メソッドです。HtmlHelperクラスインスタンスとAjaxHelperクラスインスタンスの両方からMVCFormオブジェクトを返すため、大きな違いはありませんが、AjaxHelperメソッドはJavaScriptを使用してフォームを非同期に送信します。

BeginForm()拡張メソッドには、次の2つのタイプがあります。

  • Html.BeginForm()
  • Ajax.BeginForm()

この記事では、「Html.BeginForm()」と「Ajax.BeginForm()」の両方の動作について説明しますが、これらは同じであり、同じMvcFormオブジェクトを返します。両方の方法のポストバック動作を説明するために、製品登録用のアプリケーションを作成します。それを段階的に見てみましょう。

ステップ

1MVCアプリケーションを作成する

ステップ2モデル

を作成するプロジェクトオブジェクトの値を格納するためのさまざまなプロパティを持つProductのモデル(実際にはクラス)を作成します。製品モデル( "ProductModel.cs")は次のとおりです。 

using System.Collections.Generic;  
using System.Web.Mvc;  
using System.ComponentModel.DataAnnotations;  
   
namespace FormTypesMvcApplication.Models  
{  
    public class ProductModel  
    {  
        public ProductModel()  
        {  
            Category = new List<SelectListItem>();  
            Category.Add(new SelectListItem  
            {  
                Text = "Books",  
                Value = "1"  
            });  
            Category.Add(new SelectListItem  
            {  
                Text = "Mobiles & Tablets",  
                Value = "2"  
            });  
            Category.Add(new SelectListItem  
            {  
                Text = "Laptops & Accessories",  
                Value = "3"  
            });  
        }  
         
        public int ProductId { get; set; }  
        [Required]  
        public string Name { get; set; }         
        public string Description { get; set; }  
        public string Manufacturer { get; set; }         
        [RegularExpression(@"^\$?\d+(\.(\d{2}))?$")]  
        public decimal BasePrice { get; set; }  
        public IList<SelectListItem> Category { get; set; }  
        public int CategoryId { get; set; }  
    }  
}  

これで、ビューにバインドされる製品モデルができました。

ステップ4コントローラーの

作成ビューとフォーム送信データを返すアクションメソッドを定義する製品コントローラーを作成します。ここでは、コントローラー( "ProductController.cs")を作成します。

 

Html.BeginForm()の操作


ステップ1

コントローラでアクションを作成して、UIにビューをロードします。空のモデルでビューを返すActionResultリターンタイプアクションメソッドを作成します。このアクションメソッドは、ブラウザからリクエストを行うたびにビューを読み込みます。アクションメソッドは次のとおりです。

public ActionResult ProductHtml()  
{  
    ProductModel model = new ProductModel();            
    return View(model);  
}  

ステップ2ビューの

作成Html.BeginForm()メソッドを使用してフォームを作成するProductモデルを使用して、強く型付けされたビューを作成します。BeginForm()メソッドは、開始「<form>」タグを書き込むHtmlHelperクラスの拡張メソッドであり、終了「</ form>」タグを書き込む「Dispose()」メソッドも呼び出します。MvcFormクラスはIDisposableインターフェイスを実装しているため、IDisposableインターフェイスのDispose()メソッドを呼び出して、MvcFormクラスオブジェクトを破棄できます。次のようにMvcFromを作成します。

@{         
    MvcForm mvcForm = Html.BeginForm();      
    <div>My Html Form</div>       
    mvcForm.Dispose();  
}  

そして、そのコードは、ロードされたときにブラウザの開始「<form>」タグと終了「</ form>」タグにレンダリングされます。次のように、ブラウザでソースコードを取得します。

<form action="/Product/ProductHtml" method="post">  
    <div>My Html Form</div>       
</form>  

ここで、アクションとメソッドタイプのプロパティには値があります。メソッドタイプは「post」であるため、Productコントローラーの「ProductHtml()」アクションメソッドは、postリクエストを処理するフォーム送信で呼び出されます。
次のように、同じコードを記述して、開始<form>タグと終了</ form>タグの両方を作成できます。
 

@using(Html.BeginForm())  
{      
    <div>My Html Form</div>  
}  

次に、UIにデータを表示するビュー(ProductHtml.cshtml)を作成し、そのコードは次のとおりです。
 

@model FormTypesMvcApplication.Models.ProductModel  
@using System.Web.Mvc.Html;  
   
@{  
    ViewBag.Title = "Product Master HTML";  
}  
   
<h2>Product Master</h2>  
   
<fieldset>  
    <legend>Product</legend>          
     
@using (Html.BeginForm())  
{  
     <div class="formRowContainer">  
        <div class="labelContainer">Name</div>  
        <div class="valueContainer">  
            @Html.TextBoxFor(model => model.Name)  
            @Html.ValidationMessage("Name")  
        </div>  
     </div>  
    <div class="clearStyle"></div>  
    <div class="formRowContainer">  
        <div class="labelContainer">Description</div>  
        <div class="valueContainer">@Html.TextBoxFor(model => model.Description)</div>  
    </div>  
    <div class="clearStyle"></div>  
    <div class="formRowContainer">  
        <div class="labelContainer">Manufacturer</div>  
        <div class="valueContainer">@Html.TextBoxFor(model => model.Manufacturer)</div>  
    </div>  
    <div class="clearStyle"></div>  
    <div class="formRowContainer">  
        <div class="labelContainer">Price</div>  
        <div class="valueContainer">  
            @Html.TextBoxFor(model => model.BasePrice)  
            @Html.ValidationMessage("BasePrice")  
        </div>  
    </div>  
    <div class="clearStyle"></div>  
     <div class="formRowContainer">  
        <div class="labelContainer">Category</div>  
        <div class="valueContainer">  
            @Html.DropDownListFor(model => model.CategoryId, Model.Category, "--Select--")  
        </div>  
    </div>  
    <div class="clearStyle"></div>  
    <div class="buttonContainer">  
        <button>Add Product</button>     
    </div>  
}  
</fieldset>  

ステップ3フォームの送信

処理するアクションの作成フォームが送信されると、Postメソッドが実行されることがわかっています。「BeginForm()」メソッドでは、アクションとコントローラー名を渡さなかったため、デフォルトのアクションメソッドは、ビュー名としてアクションメソッドが呼び出されてデータリクエストの投稿を処理することを意味します。そのため、フォーム送信時にUIに表示されるコンテンツにフォームデータを返すアクションを作成します。

[HttpPost]  
public ActionResult ProductHtml(ProductModel model)  
{  
    if (ModelState.IsValid)  
    {  
      System.Text.StringBuilder sb = new System.Text.StringBuilder();  
  
       sb.Append("Product Name :" + model.Name + "</br/>");  
       sb.Append("Description :" + model.Description + "</br/>");  
       sb.Append("Manufacturer :" + model.Manufacturer + "</br/>");  
       sb.Append("Price :" + model.BasePrice + "</br/>");  
       sb.Append("Category :" + model.Category[model.CategoryId-1].Text);  
        return Content(sb.ToString());  
    }  
    else  
    {  
        return View(model);  
    }  
}  

これでプロセスの準備が整い、アプリケーションが実行されます。 

MVC1.jpg

送信ボタン「製品の追加」をクリックすると、すべてのフォームデータが送信され、ポストバックのために同じURLの別の画面に結果が表示されます。

MVC2.jpg

 

Ajax.BeginForm()の操作


ステップ1コントローラでアクションを作成してUIにビューをロードします

空のモデルでビューを返すActionResultリターンタイプメソッドを作成します。このアクションメソッドは、ブラウザからリクエストを行うたびにビューを読み込みます。アクションの方法は次のとおりです。

public ActionResult ProductAjax()  
{  
    ProductModel model = new ProductModel();  
    return View(model);  
}  

ステップ2ビューの作成

「Ajax.BeginForm()」を使用すると、JavaScriptを使用してフォームが送信されます。共有レイアウトとして「_Layout.cshtml」を使用しているため、JavaScriptファイル「jquery.unobtrusive-ajax.min.js」参照を追加して、ポストバックでajaxフォーム送信リクエストを処理します。

<script src="@Url.Content("~/Scripts/jquery.unobtrusive-ajax.min.js")" type="text/javascript"></script>  

次に、リクエストを処理するために、「<appSettings>」セクションの下のweb.configファイルのキーとして「UnobtrusiveJavaScriptEnabled」を追加します。
 

<appSettings>  
    <add key="webpages:Enabled" value="false" />  
    <add key="ClientValidationEnabled" value="true"/>  
    <add key="UnobtrusiveJavaScriptEnabled" value="true"/>  
</appSettings>  

次に、Ajaxフォームを持つビューを作成します。Ajax.BeginForm()メソッドには3つの引数があり、これらはactionName、controllerName、およびAjaxOptionsです。コントロールIDの値を持つAjaxOptionsオブジェクトのUpdateTargetIdプロパティを使用しており、POSTリクエストの後に応答が表示されます。次のコードでは、結果データがそのdivに表示されるように、dividを渡します。
 

@model FormTypesMvcApplication.Models.ProductModel  
   
@{  
    ViewBag.Title = "Product Master Ajax";  
}  
   
<h2>Product Master</h2>  
   
<fieldset>  
    <legend>Product</legend>     
@using (Ajax.BeginForm("ProductAjax", "Product", new AjaxOptions { UpdateTargetId = "Productresult" }))  
{  
    <div id="Productresult"></div>  
     <div class="formRowContainer">  
        <div class="labelContainer">Name</div>  
        <div class="valueContainer">  
            @Html.TextBoxFor(model => model.Name)  
            @Html.ValidationMessage("Name")  
        </div>  
     </div>  
    <div class="clearStyle"></div>  
    <div class="formRowContainer">  
        <div class="labelContainer">Description</div>  
        <div class="valueContainer">@Html.TextBoxFor(model => model.Description)</div>  
    </div>  
    <div class="clearStyle"></div>  
    <div class="formRowContainer">  
        <div class="labelContainer">Manufacturer</div>  
        <div class="valueContainer">@Html.TextBoxFor(model => model.Manufacturer)</div>  
    </div>  
    <div class="clearStyle"></div>  
    <div class="formRowContainer">  
        <div class="labelContainer">Price</div>  
        <div class="valueContainer">  
            @Html.TextBoxFor(model => model.BasePrice)  
            @Html.ValidationMessage("BasePrice")  
        </div>  
    </div>  
    <div class="clearStyle"></div>  
     <div class="formRowContainer">  
        <div class="labelContainer">Category</div>  
        <div class="valueContainer">  
            @Html.DropDownListFor(model => model.CategoryId, Model.Category, "--Select--")  
        </div>  
    </div>  
    <div class="clearStyle"></div>  
    <div class="buttonContainer">  
        <button>Add Product</button>     
    </div>  
}  
</fieldset> 

ステップ3

フォーム送信を処理するアクションの作成フォームが送信されると、Postメソッドが実行されることがわかっています。「BeginForm()」メソッドでは、アクション名とコントローラー名を渡して、データ後のリクエストを処理するアクションメソッドが呼び出されるようにしました。そのため、フォームの送信時にUIに表示されるコンテンツにフォームデータを返すアクションが作成されます。

[HttpPost]  
public ActionResult ProductAjax(ProductModel model)  
{  
    if (ModelState.IsValid)  
    {  
        System.Text.StringBuilder sb = new System.Text.StringBuilder();  
        sb.Append("Product Name :" + model.Name + "</br/>");  
        sb.Append("Description :" + model.Description + "</br/>");  
        sb.Append("Manufacturer :" + model.Manufacturer + "</br/>");  
        sb.Append("Price :" + model.BasePrice + "</br/>");  
        sb.Append("Category :" + model.Category[model.CategoryId-1].Text);  
        return Content(sb.ToString());  
    }  
    else  
    {  
        return View(model);  
    }  
}  

これでプロセスの準備が整い、アプリケーションが実行されます。

MVC3.jpg

すべてのフォームデータを送信する送信ボタン「製品の追加」をクリックすると、divの同じ画面に結果が表示されます。したがって、結果はフォームデザインの次の画面に表示されます。

MVC4.jpg

結論

この記事では、HtmlフォームとAjaxフォームの両方、およびこれらのフォームがポストバックでどのように機能するかについて学習しました。アプリケーションの要件に従って、両方のフォームを使用できます。

リンク: https://www.c-sharpcorner.com/UploadFile/3d39b4/working-with-html-beginform-and-ajax-beginform-in-mvc-3/

#html #aspdotnet 

Consuming Web API Custom Validation in MVC using RestSharp

Let’s see how to consume a custom validation scheme in Web API using FluentValidation, RestSharp, and JSON.NET. Sample project included!

#asp.net mvc #web api #api #mvc using restsharp #mvc #programming