2017-12-05 22 views
0

私は/ 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

Empty Search Modal

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">&times;</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>&nbsp;</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) 
        &nbsp; 
        @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) 
        &nbsp; 
        @Html.DisplayFor(x => i.Address.State) 
        &nbsp; 
        @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> 
} 

+1

送信ボタンがフォームタグ内にある場合は、そのフォームタグをクリックするとフォーム送信が行われます。部分的な結果を取得してモーダルコンテンツを更新するには、アクションメソッドへのajax呼び出しを行う必要があります。 – Shyju

答えて

0

と(私はモーダルポップアップでこれを表示したい)

public ActionResult Index(string Search_Type, string Search_String) 
    { 
     if (Search_String == null) 
     { 
      var accounts = db.Accounts 
       .Include(a => a.Account_Type) 
       .Include(a => a.Account_Person) 
       .Include(a => a.Account_Address) 
       .Include(a => a.Account_Contact); 
      return PartialView(accounts.ToList()); 
     } 
     else 
     { 
      if (Search_Type == "Account_ID") 
      { 
       var accounts = db.Accounts 
       .Include(a => a.Account_Type) 
       .Include(a => a.Account_Person) 
       .Include(a => a.Account_Address) 
       .Include(a => a.Account_Contact) 
       .Where(a => a.Account_ID.ToString() == Search_String); 
       return PartialView(accounts.ToList()); 
      } 
      else if (Search_Type == "Last_Name") 
      { 
       var accounts = db.Accounts 
       .Include(a => a.Account_Type) 
       .Include(a => a.Account_Person) 
       .Where(b => b.Account_Person.Any(c => c.Person.Last_Name.StartsWith(Search_String))) 
       .Include(a => a.Account_Contact) 
       .Include(a => a.Account_Address); 
       return PartialView(accounts.ToList()); 
      } 
      else if (Search_Type == "Phone_Number") 
      { 
       var accounts = db.Accounts 
       .Include(a => a.Account_Type) 
       .Include(a => a.Account_Person) 
       .Include(a => a.Account_Contact) 
       .Where(b => b.Account_Contact.Any(c => c.Contact.Value == Search_String && c.Contact.Contact_Type.Name.Contains("Phone"))) 
       .Include(a => a.Account_Address); 
       return PartialView(accounts.ToList()); 
      } 
      else 
      { 
       var accounts = db.Accounts 
        .Include(a => a.Account_Type) 
        .Include(a => a.Account_Person) 
        .Include(a => a.Account_Address) 
        .Include(a => a.Account_Contact); 
       return PartialView(accounts.ToList()); 
      } 
     } 

アカウントIndex.cshtmlを(私はこのコントローラからのインデックスを()呼び出したいです)あなたの現在のコードは、ユーザがsubmitボタンをクリックしたときにsubmitボタンがタグ内にあるので、通常のフォーム送信を行います。あなたのユースケースでは、通常のフォームsubmitイベントをjavascriptを使用してハイジャックし、アクションメソッドにajax呼び出しを行い、search_typesearch_stringパラメータを使用してフィルタリングされたデータを取得し、部分ビュー結果を返します。この部分的な結果は、モーダルダイアログ内に表示したいHTMLマークアップです。 ajax呼び出しがサーバーからの応答を受け取ったら、この応答でモーダルダイアログの本文内容を更新し、モーダルダイアログを起動します。

@using (Html.BeginForm("Index", "Accounts", FormMethod.Post, new { id = "searchForm" })) 
{ 
    <div> 
     <input type="text" name="Search_String" /> 
     <input type="submit" id="submit" value="Search" /> 
    </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">&times;</span> 
       </button> 
       <h4 class="modal-title">Modal title</h4> 
      </div> 
      <div class="modal-body"> 
      </div> 
      <div class="modal-footer"> 
       <button type="button" class="btn" data-dismiss="modal">Close</button> 
       <button type="button" class="btn btn-primary">Save changes</button> 
      </div> 
     </div><!-- /.modal-content --> 
    </div><!-- /.modal-dialog --> 
</div><!-- /.modal --> 

今すぐあなたの検索フォーム上のイベントを提出し、(通常のフォーム送信)通常の動作を停止し、代わりにAjaxフォームを提出しない作りに耳を傾けている、いくつかのJavaScriptコードを持っています。

$(document).ready(function() { 

    $('#searchForm').submit(function (e) { 
     e.preventDefault(); 
     var $form = $(this); 

     $.post($form.attr("action"), $form.serialize()).done(function (res) { 
      $mymodal = $("#myModal"); 
      //update the modal's body with the response received 
      $mymodal.find("div.modal-body").html(res); 
      // Show the modal 
      $mymodal.modal("show"); 
     }); 
    }); 

}); 

今、あなたは(それがどんなレイアウトのコードを実行しないように、ちょうどそのビューコード)あなたのインデックスのアクションメソッドは部分ビューを返すことを確認する必要があります。

[HttpPost] 
public ActionResult Index(string Search_Type, string Search_String) 
{ 
    // Your existing filtering code goes here. 
    return PartialView(accounts.ToList()); 
} 
+0

こんにちは、上記のコードを追加しましたが、動作させることができません。私が持っていた最初のエラーは、$は定義されていませんでした。これは、_layout.cshtmlにJSコードを追加する必要があったために発生しました。このコードが依存していたスクリプトがそこにロードされていたからです。今、私は空のモーダルポップアップを使って、私が始めたところに戻ります。 – Nyhack56

+0

これは、ページに表示される前にjQueryを使用していることを意味します。ページの表示ソースを確認して、 '$'を使用する行とjQueryライブラリを含む行の順序を確認します。 'scripts'セクションを使用して、ページレベルのスクリプトを組み込んでjQueryがページに含まれた後に実行されるようにしたいと思うかもしれません。これを参照してください[jqueryがうまく動作するように、jsスクリプトファイルをmvcアプリケーションに配置する必要がありますか?](https://stackoverflow.com/questions/34147155/where-should-i-place-the-js-script-files- in-a-mvc-application-so-jquery-works-we/34147263#34147263) – Shyju

0

私はそれを理解しました。

  1. 私はモーダルをSearch.cshtmlのHTML.BeginFormの外に移動しました。次に、フォームの入力を簡略化し、データトグルとデータターゲットのプロパティを削除しました。

    @model CustomerRelationshipManager.Models.Search 
    
    @{ 
        ViewBag.Title = "Search"; 
    } 
    @using (Html.BeginForm("Index", "Accounts", FormMethod.Post, 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" id="submit" 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">&times;</span></button> 
          <h4 class="modal-title">Modal</h4> 
         </div> 
         <div class="modal-body"> 
    
         </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 --> 
    

  2. 私は_layout.cshtml共有ファイルの末尾にJavaScriptを移動しました。

    @Scripts.Render("~/bundles/jquery") 
    @Scripts.Render("~/bundles/bootstrap") 
    @RenderSection("scripts", required: false) 
    
    <script type="text/javascript"> 
    $(document).ready(function() {    
        $('#searchForm').submit(function (e) { 
         e.preventDefault(); 
         var $form = $(this); 
         $.post($form.attr("action"), $form.serialize()).done(function (res) { 
          $mymodal = $("#myModal"); 
          //update the modal's body with the response received 
          $mymodal.find("div.modal-body").html(res); 
          // Show the modal 
          $mymodal.modal("show"); 
         }); 
        }); 
    
        }); 
    
  3. ことを考え出すした後、私は私が私のAccountsControllerのインデックス()関数にブレークポイントを設定することにより、発見LINQのエラーが発生しました。一度それを修正すると、私のAccountsControllerのIndex()アクションが私のモーダルポップアップに現れました。あなたの助け、Shyjuため

HomeController Search() Modal Dialog Displaying AccountsController Index()

ありがとう!

関連する問題