asp.net-mvc-3 - ASP.NET MVC3 で Grid.MVC を使用してレコードを編集するためのポップアップダイアログ

Question

http://gridmvc.azurewebsites.net/で入手可能な Grid.MVC を使用しています。これは、フィルタリング、並べ替え、ページングが適切に行われるグリッドにデータを適切に表示する機能を提供します。これは、グリッド内のデータが現時点でどのように見えるかです。

グリッドデータ表示

ここまでは順調ですね。データを表示するには、次のコントローラーと .cshtml を使用しています

コントローラ

  /// <summary>
    /// Brings List Of Customers
    /// </summary>
    /// <returns></returns>
    [HttpGet]
    public ActionResult CustomerList()
    {
        CustomerListViewModel custList = new CustomerListViewModel();
        List<CustomerViewModel> custVMList = new List<CustomerViewModel>();
        custVMList = custRepository.GetCustomers();
        custList.customers = custVMList;
        return View(custList);
    }

同じの.cshtmlは

    @model IEnumerable<DataAccess.Models.CustomerViewModel>
@*Using Twitter Bootstrap API*@
<link href="@Url.Content("~/Content/Gridmvc.css")" rel="stylesheet" type="text/css" />
<script src="@Url.Content("~/Scripts/gridmvc.min.js")" type="text/javascript"> </script>
<script src="@Url.Content("~/Scripts/js/bootstrap.min.js")" type="text/javascript"> </script>
<link href="@Url.Content("~/Content/bootstrap/css/bootstrap.min.css")" rel="stylesheet" type="text/css" />
<link href="@Url.Content("~/Content/bootstrap/css/bootstrap-responsive.min.css")" rel="stylesheet" type="text/css" />

@using GridMvc.Html
@{
    ViewBag.Title = "Customers List";
}
@Html.Grid(Model).Columns(columns =>
                        {

                            columns.Add(m => m.CustomerName).Titled(" Name ").Sortable(true).SortInitialDirection(GridMvc.Sorting.GridSortDirection.Ascending).Filterable(true);
                            columns.Add(m => m.Address1).Titled("Address1").Sortable(true).Filterable(true);
                            columns.Add(m => m.Address2).Titled("Address2").Sortable(true).Filterable(true);
                            columns.Add(m => m.City).Titled("City").Sortable(true).Filterable(true);
                            columns.Add(m => m.County).Titled("County").Sortable(true).Filterable(true);
                            columns.Add(m => m.ContactName).Titled("Contact Name").Sortable(true).Filters.ToString();
                            columns.Add(m => m.Email).Titled("Email Address").Sortable(true).Filterable(true);
                            columns.Add(m => m.ReferenceNumber).Titled("Reference Number").Sortable(true).Filterable(true);
                            columns.Add(m => m.ModifiedOn).Titled("Modified On").Filterable(true).Sortable(true);
                            columns.Add(m => m.CustomerId)
                               .Titled("Edit")
                               .Sanitized(false)
                               .Encoded(false)
                                //.RenderValueAs(o => Html.ActionLink("Edit", "EditCustomer", "Customer", new { CustomerId = o.CustomerId }, new { title = "Please click here to edit the record", @class = "modal-link" }).ToHtmlString());
                            .RenderValueAs(d => Html.ActionLink("Edit", "EditCustomer", "Customer", new { CustomerId = d.CustomerId }, new { @class = "modal-link" }));

                        }).WithPaging(4)
<br />
<br />
@Html.ActionLink("Click to Add Customer", "AddCustomer", "Customer", new { @class = "modal-link" })
<!-- Modal -->
<div id="myModal" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"
    aria-hidden="true">
    <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">
            ×</button>
        <h3 id="myModalLabel">
            Edit Customer</h3>
    </div>
    <div class="modal-body">
        <p>
            Loading…&lt;/p>
    </div>
    <div class="modal-footer">
        <button class="btn btn-primary" data-dismiss="modal" aria-hidden="true">
            Close</button>
    </div>
</div>
<script type="text/javascript">
    //this script reset modal each time when you click on the link:
    $(function () {
        $(".modal-link").click(function (event) {
            event.preventDefault();
            $('#myModal').removeData("modal");
            $('#myModal').modal({ remote: $(this).attr("href") });
        });
    })
</script>

[編集] ボタンをクリックすると、以下のようにポップアップウィンドウに完全なレコードが読み込まれます。ちなみに、これは Twitter Bootstrap スタイルを使用しています。

編集用のデータを表示するポップアップダイアログボックス

ここまでは順調ですね。

コントローラーと .cshtml は

  /// <summary>
    /// Brings a Specific Customer
    /// </summary>
    /// <param name="CustomerId"></param>
    /// <returns></returns>
    [HttpGet]
    public ActionResult EditCustomer(Guid CustomerId)
    {
        CustomerViewModel cusVM = custRepository.GetCustomer(CustomerId);
        return View(cusVM);

    }

    /// <summary>
    /// Editing Customer
    /// </summary>
    /// <param name="cusVM"></param>
    /// <returns></returns>
    [HttpPost]
    public ActionResult EditCustomer(CustomerViewModel cusVM)
    {
        if (ModelState.IsValid)
        {
            custRepository.EditCustomer(cusVM);
            return RedirectToAction("CustomerList", "Customer");
        }
        else
        {
            return PartialView(cusVM);
        }
    }

Edit customer の .cshtml は次のとおりです。

@model DataAccess.Models.CustomerViewModel
@{
    Layout = null;
}
@using (Html.BeginForm())
{
    @Html.ValidationSummary(true)
    <fieldset>       
        <div class="editor-label">
            @Html.LabelFor(model => model.CustomerName)
        </div>
        <div class="editor-field">
            @Html.EditorFor(model => model.CustomerName)
            @Html.ValidationMessageFor(model => model.CustomerName)
        </div>
        <div class="editor-label">
            @Html.LabelFor(model => model.Address1)
        </div>
        <div class="editor-field">
            @Html.EditorFor(model => model.Address1)
            @Html.ValidationMessageFor(model => model.Address1)
        </div>
         <div class="editor-label">
            @Html.LabelFor(model => model.Address2)
        </div>
        <div class="editor-field">
            @Html.EditorFor(model => model.Address2)
            @Html.ValidationMessageFor(model => model.Address2)
        </div>
         <div class="editor-label">
            @Html.LabelFor(model => model.City)
        </div>
        <div class="editor-field">
            @Html.EditorFor(model => model.City)
            @Html.ValidationMessageFor(model => model.City)
        </div>
         <div class="editor-label">
            @Html.LabelFor(model => model.County)
        </div>
        <div class="editor-field">
            @Html.EditorFor(model => model.County)
            @Html.ValidationMessageFor(model => model.County)
        </div>
        <div class="editor-label">
            @Html.LabelFor(model => model.ContactName)
        </div>
        <div class="editor-field">
            @Html.EditorFor(model => model.ContactName)
            @Html.ValidationMessageFor(model => model.ContactName)
        </div>
        <div class="editor-label">
            @Html.LabelFor(model => model.Email)
        </div>
        <div class="editor-field">
            @Html.EditorFor(model => model.Email)
            @Html.ValidationMessageFor(model => model.Email)
        </div>
        <div>
            @Html.HiddenFor(model => model.CustomerId)
        </div>
        <div class="editor-label">
            @Html.LabelFor(model => model.ReferenceNumber)
        </div>
        <div class="editor-field">
            @Html.EditorFor(model => model.ReferenceNumber)
            @Html.ValidationMessageFor(model => model.ReferenceNumber)
        </div>
        <p>
            <input type="submit" value="Save" class="btn btn-primary" />
        </p>
    </fieldset>
}

サーバー側の検証を使用しています。お客様のモデルは。

 using System.ComponentModel.DataAnnotations;
using System;
namespace DataAccess.Models
{
    /// <summary>
    /// Class Holds the List Of Properties of a Customer
    /// </summary>
    public class CustomerViewModel
    {
        [Required]
        [DataType(DataType.Text)]
        [Display(Name = "Customer Name")]
        public string CustomerName { get; set; }

           [Required]
        [DataType(DataType.Text)]
        [Display(Name = "Address1")]
        public string Address1 { get; set; }

           [Required]
           [DataType(DataType.Text)]
           [Display(Name = "Address2")]
           public string Address2 { get; set; }

           [Required]
           [DataType(DataType.Text)]
           [Display(Name = "City")]
           public string City { get; set; }


           [Required]
           [DataType(DataType.Text)]
           [Display(Name = "County")]
           public string County { get; set; }

           [Required]
        [DataType(DataType.Text)]
        [Display(Name = "ContactName")]
        public string ContactName { get; set; }

           [Required]
        [DataType(DataType.Date)]
        [Display(Name = "Email")]
        public string Email { get; set; }

        [DataType(DataType.Text)]
        public Guid CustomerId { get; set; }


        [DataType(DataType.Text)]
        public string ReferenceNumber { get; set; }

        [DataType(DataType.Date)]
        public DateTime ModifiedOn{ get; set; }

    }
}

検証エラーがない場合、データが保存され、customerList Grid ページが読み込まれます。

問題

検証エラーが発生すると、検証メッセージとともに EditCustomer にリダイレクトされます。検証エラーをポップアップウィンドウに表示するにはどうすればよいですか。

これは、プレーンページにエラーを表示する方法です。

エラーはポップアップウィンドウに表示されるはずですが、別の URL でページをリロードします。 .

エラーをポップアップウィンドウ自体に表示するにはどうすればよいですか。

score 3 · Accepted Answer

AJAX の検証とクライアント側の検証を詳しく調べる必要があります。基本的に何が起こっているかは、最初のページの読み込み後に読み込まれたため、編集フォームにバインドされた検証が含まれていない読み込み中の部分ビューです。これをページに追加してみてください（JQuery）：

$.validator.unobtrusive.parse('#formId');

ここで、formId は HTML フォームの ID です。また、使用している Html ヘルパーの代わりに Ajax.BeginForm ヘルパーを使用する必要があります。

それを超えて、投稿を見てください：

部分ビューと Ajax を使用した ASP.NET MVC クライアントの検証

asp.net-mvc-3 - ASP.NET MVC3 で Grid.MVC を使用してレコードを編集するためのポップアップ ダイアログ

1 に答える 1

Related

Reference

asp.net-mvc-3 - ASP.NET MVC3 で Grid.MVC を使用してレコードを編集するためのポップアップダイアログ