5
Grid.MVCはhttp://gridmvc.azurewebsites.net/で利用できます。グリッド内のデータをフィルタリング、並べ替え、ページングがうまく表示されるように表示する機能を提供します。これは、グリッドのデータが現時点で見える方法です。ASP.NET MVC3で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…</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のブートストラップスタイルを使用しています。
これまでのところは良いです。
コントローラと.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);
}
}
編集顧客のための.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へのリダイレクトがある問題。 検証エラーをポップアップウィンドウに表示させる方法を教えてください。
これはプレーンページにエラーを表示する方法です。
。
エラーをポップアップウィンドウ自体に表示させる方法を教えてください。
はいマルコ：それを超えて
はポストを見てみましょう。ありがとうございました。私はJQuery Validateを邪魔にならず、スクリプトを検証しました。これで、ページが読み込まれ、すべてのエラーがポップアップダイアログに表示されます。ありがとうございました。 –