私は/ Home/Indexに表示するSearch.cshtmlという部分的なビューを持っています。このファイルでは、検索結果を使用して/ Views/Accounts/Indexを検索して元に戻すHTMLフォームがあります。これらの結果を検索ビューにあるモーダルポップアップdivに表示したいとします。モーダルポップアップで部分表示を表示
以下のコードでSearch(sumbit input)をクリックすると、空のモーダルになります。
MVCについては、まだ初心者です。 Stack Overflowで見つかったいくつかの異なる結果を試しましたが、解決策を見つけることができませんでした。以下のコードは少なくとも空白ですが、私にモーダルポップアップを与えます。
すごく簡単なことがありますか?私は下のモーダルボディ(Html.Action、RenderAction、Partial、RenderPartial)のすべてを試しましたが、何も動かないようです。また、私はそこに間違った木を吠えていますか?
私は以下のカップルのスクリーンショットとコードを持っています。私がこれをよりよく理解するのを助ける何かが評価されます。ありがとうございました。
/Home/Index with Search partial view
Search.cshtml
@model CustomerRelationshipManager.Models.Search
@{ViewBag.Title = "Search";}
@using (Html.BeginForm("Index", "Accounts", new { id = "searchForm" }))
{
<div style="border: solid 1px #ccc; padding: 30px 0 30px 30px; border-radius: 5px;
width: 325px; margin: auto; display: table;">
<table>
<tr>
<td valign="top">
Search By:
</td>
<td>
@Html.DropDownList("Search_Type", "Search_Type")
</td>
</tr>
<tr>
<td valign="top"></td>
<td>
@Html.TextBox("Search_String")
</td>
</tr>
<tr>
<td></td>
<td>
<input type="submit" data-toggle="modal" data-target="#myModal" value="Search" />
</td>
</tr>
</table>
</div>
<div class="modal fade" id="myModal">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title">Modal title</h4>
</div>
<div class="modal-body">
@{Html.Action("Index","Accounts");}
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div><!-- /.modal-content -->
</div><!-- /.modal-dialog -->
</div><!-- /.modal -->
}
HomeController.cs
public ActionResult Search()
{
List<SelectListItem> items = new List<SelectListItem>();
items.Add(new SelectListItem() { Text = "Account Number", Value = "Account_ID" });
items.Add(new SelectListItem() { Text = "Last Name", Value = "Last_Name" });
items.Add(new SelectListItem() { Text = "Phone Number", Value = "Phone_Number" });
ViewBag.Search_Type = items;
return PartialView();
}
[HttpPost]
[AllowAnonymous]
public ActionResult Search(Search search)
{
return PartialView("~/Accounts/Index");
//return RedirectToAction("Index", "Accounts");
}
AccountController.csは
@model IEnumerable<CustomerRelationshipManager.Models.Account>
@{
ViewBag.Title = "Home";
}
<h2>Index</h2>
<p>
@Html.ActionLink("Create New", "Create")
</p>
<table class="table">
<tr>
<th>Account #</th>
<th>Contact Name(s)</th>
<th>Address</th>
<th>Contact</th>
</tr>
w2
@foreach (var item in Model)
{
<tr>
<td>
@Html.DisplayFor(modelItem => item.Account_ID)
<span> </span>
</td>
<td>
@foreach (var i in item.Account_Person)
{
<span>
<b>@Html.DisplayFor(x => i.Person_Type.Name)</b>
<br />
@Html.DisplayFor(x => i.Person.First_Name)
@Html.DisplayFor(x => i.Person.Last_Name)
</span>
<br />
}
</td>
<td>
@foreach (var i in item.Account_Address)
{
<span>
<b>@Html.DisplayFor(x => i.Address_Type.Name)</b>
<br />
@Html.DisplayFor(x => i.Address.Address1)
<br />
@Html.DisplayFor(x => i.Address.Address2)
@if (i.Address.Address2 != null)
{ <br />}
@Html.DisplayFor(x => i.Address.City)
@Html.DisplayFor(x => i.Address.State)
@Html.DisplayFor(x => i.Address.Postal_Code)
<br />
@Html.DisplayFor(x => i.Address.Country)
<br />
</span>
}
</td>
<td>
@foreach (var i in item.Account_Contact)
{
<span>
<b>@Html.DisplayFor(x => i.Contact.Contact_Type.Name)</b>
<br />
@Html.DisplayFor(x => i.Contact.Value)
<br />
</span>
}
</td>
<td>
@Html.ActionLink("Edit", "Edit", new { id = item.Account_ID }) |
@Html.ActionLink("Details", "Details", new { id = item.Account_ID }) |
@Html.ActionLink("Delete", "Delete", new { id = item.Account_ID })
</td>
</tr>
}
送信ボタンがフォームタグ内にある場合は、そのフォームタグをクリックするとフォーム送信が行われます。部分的な結果を取得してモーダルコンテンツを更新するには、アクションメソッドへのajax呼び出しを行う必要があります。 – Shyju