渲染Jquery模式弹出窗口中的局部视图 [英] Render a partial view inside a Jquery modal popup

问题描述

问题是：我有View用户模式显示用户的id和他在foreach上的特点：$ b​​
$ b $ $ $ $ $ $ $ $ $ $ $ $ @model Project.User
@foreach（模型中的用户用户）
{
< table class =simple-little-tablecellspacing ='0'>
< tr>
< td> Id @ user.Id< / td>
< td>特征：@ user.Charact< / td>
< td>< button id =but>用户禁止< /按钮>< / td>
< / tr>
< / table>

在buttonClick上我渲染Jquery模式弹出窗口中的局部视图：

 < div id =dialog1title =对话标题> @ Html.Partial（UserPartial）< / div> ; 
 $ b $（$ {
 $（＃dialog1）.dialog（{
 autoOpen：false 
}）; 
 $ b $点击（function（）{
 $（＃dialog1）。dialog（'open'）; 
}）; 
}）; 
  

这是UserPartial：

 < div class =aaa> 
 @using（Html.BeginForm（BansUsers，Bans，FormMethod.Post））
 {
< div class =editor-label> 
 @ Html.Label（Patronimyc）
 @ Html.TextBoxFor（model => model.Surname）
< / div> 
< div class =editor-label> 
 @ Html.Label（Name）
 @ Html.TextBoxFor（model => model.Name）
 @ Html.ValidationMessageFor（model => model.Name）
< / div> 
< input type =submitid =submitvalue =禁止用户/> 
 
 
 
 $ b $ p $如何在foreach中的弹出窗口中传输用户ID？例如，在弹出式窗口中给了我：你选择了用户号码5
感谢你的回答！ 
 
解决方案
我为您创建了一个小提琴，以显示如何获取您选择的记录的ID：
 
 $ b 
  http://jsfiddle.net/uyg0v4mp/  
 
 
解释一下：你目前的代码无法判断哪个你想要选择的ID，当你点击你的禁止按钮。所以在小提琴中，我创建了一个隐藏的输入，其中包含列表/表中每个记录的ID。为了显示，您可以点击按钮，并出现警报，告诉您选择了哪个ID。你应该能够把这个想法合并到你自己的代码中。
 
 
添加隐藏的像这样：
 
 
 < TR> 
< td> Id @ user.Id< / td> 
< td>特征：@ user.Charact< / td> 
< td> 
< input class =idValtype =hiddenvalue =@ user.Id/> 
< button id =but>用户禁止< /按钮> 
< / td> 
  
 
 
 
 
现在我建议你改变这个编码有点...而不是直接将你的局部视图硬编码到你的dialog1，你应该通过jquery的get-call来插入它。新代码： 
 
 
 < div id =dialog1title =对话框标题>< / div> 
 $ b $（$ {
 $（＃dialog1）.dialog（{
 autoOpen：false 
}）; 
 $ b $点击（函数（）{
 var selectedId = $（this）.parent（）。find（。idVal）。val（）; 
 
 $ .get（'@ Url.Action（GetPartialView，Home）'，{id：selectedId}，function（partialView）{
 $（＃dialog1）。html（partialView）; 
}）; 
 
 $（＃dialog1）。dialog（'open'）; 
}）; 
}）; 
  
因此，上面的代码调用了一个名为GetPartialView的动作，在所选ID的id值中。最后，我们使用'html'方法将我们的局部视图插入到对话框中。
 
 
 
局部视图动作：
 
 
  [HttpGet] 
 public PartialViewResult GetPartialView（int id）
 {
 var user = db.Users.Single（r => r。 Id == id）; 
 
返回PartialView（UserPartial，user）; 
 
 $ / code> 
就这样！
The question is : I have View which on model of users displays id of the user and his characteristic on foreach:
@model Project.User
@foreach (User user in Model)
{
  <table class="simple-little-table" cellspacing='0'>
    <tr>
      <td>Id @user.Id </td>
      <td>characteristic:@user.Charact</td>
      <td><button id="but">User Ban</button></td>
    </tr>
  </table>
}
On buttonClick I Render a partial view inside a Jquery modal popup:
<div id="dialog1" title="Dialog Title">@Html.Partial("UserPartial")</div>

$(function () {
  $( "#dialog1" ).dialog({
    autoOpen: false
  });

  $("#but").click(function() {
    $("#dialog1").dialog('open');
  });
});
This is UserPartial:
<div class = "aaa">
@using (Html.BeginForm("BansUsers", "Bans", FormMethod.Post))
{
  <div class="editor-label">
    @Html.Label("Patronimyc")
    @Html.TextBoxFor(model => model.Surname)
  </div>
  <div class="editor-label">
    @Html.Label("Name")
    @Html.TextBoxFor(model => model.Name)
    @Html.ValidationMessageFor(model=>model.Name)
  </div>
  <input type="submit" id="submit" value="Ban User" />
}
How to transfer user id in popup window from foreach? That, for example, in popup window gave out to me : "you chose the user number 5"
Thanks for answers!
解决方案
I created a fiddle for you to show how to get the ID of your selected record:


http://jsfiddle.net/uyg0v4mp/

To explain: your current code has no way of telling which ID you want to select when you click your "Ban" button.  So in the fiddle, I've created a hidden input that contains the ID for each record in the list/table.  For purposes of display, you can click the button and an alert comes up telling you which ID you've selected.  You should be able to incorporate that idea to your own code.

Add the hidden like so:
<tr>
  <td>Id @user.Id </td>
  <td>characteristic:@user.Charact</td>
  <td>
    <input class="idVal" type="hidden" value="@user.Id" />
    <button id ="but">User Ban</button>
 </td>


Now I suggest you change this code a bit... rather than hard-coding your partial view directly into your "dialog1" , you should insert it via a jquery get-call.  New code:
<div id="dialog1" title="Dialog Title"></div>

$(function () {
  $( "#dialog1" ).dialog({
    autoOpen: false
  });

  $("#but").click(function() {
    var selectedId = $(this).parent().find(".idVal").val();

    $.get('@Url.Action("GetPartialView", "Home")', { id: selectedId }, function (partialView) {
      $("#dialog1").html(partialView);
    });

    $("#dialog1").dialog('open');
  });
});
So the above makes a get-call to an action named "GetPartialView", and we're passing in the 'id' value of the selected ID.  Lastly, we use the 'html' method to insert our partial view into our dialog .

The partial view action:
[HttpGet]
public PartialViewResult GetPartialView(int id)
{
  var user = db.Users.Single(r => r.Id == id);

  return PartialView("UserPartial", user);
}
And that's it!

                        
这篇关于渲染Jquery模式弹出窗口中的局部视图的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！