渲染一個jQuery模式彈出內部的局部視圖

Question

的問題是：我有查看該用戶的用戶顯示ID的模型和他的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> 
} 

在buttonClick我裏面渲染的局部視圖一個jQuery模式彈出：

<div id="dialog1" title="Dialog Title">@Html.Partial("UserPartial")</div> 

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

    $("#but").click(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="submit" id="submit" value="Ban User" /> 
} 

如何傳輸的用戶ID從foreach彈出窗口？例如，在彈出式窗口中向我發出了：「您選擇了用戶號碼5」 感謝您的回答！

Answer 1

我創建了一個小提琴爲你展現如何讓你選擇的記錄的ID：

http://jsfiddle.net/uyg0v4mp/

要解釋一下：你目前的代碼有沒有辦法告訴你要選擇你的時候，其ID點擊你的「禁止」按鈕。所以在小提琴中，我創建了一個隱藏的輸入，其中包含列表/表中每個記錄的ID。爲了顯示，您可以點擊該按鈕，並出現警報，告訴您您選擇了哪個ID。你應該能夠將這個想法結合到你自己的代碼中。

添加隱像這樣：

<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> 

現在我建議你更改此代碼有點...而不是硬編碼的局部視圖直接進入你的「dialog1」，你應該通過jquery get-call插入它。新代碼：

<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'); 
    }); 
}); 

所以上面發出GET呼叫到一個名爲「GetPartialView」的行動，我們正在通過在選定的ID的「id」值。最後，我們使用'html'方法將我們的部分視圖插入到對話框中。

局部視圖操作：

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

    return PartialView("UserPartial", user); 
} 

就是這樣！

Answer 2

最簡單的解決方案，就是製作一個模式foreach個人user。

在下面查看我修改了button和模式的基礎上id有user.Id

@model Project.User 
<table class="simple-little-table" cellspacing='0'> 
@foreach (User user in Model) 
{ 
    <tr> 
     <td>Id @user.Id </td> 
     <td>characteristic:@user.Charact</td> 
     <td> 
     <button id ="but@user.Id">User Ban</button> 
     </td> 
    </tr> 

    <div id="dialog@user.Id" title="Dialog Title">@Html.Partial("UserPartial", user)</div> 

    $(function() { 
     $("#dialog@user.Id").dialog({ 
     autoOpen: false 
     }); 

     $("#but@user.Id").click(function() { 
     $("#dialog@user.Id").dialog('open'); 
     }); 
    }); 
} 
</table> 

注：一個更好的解決方法是將有一個模態窗口，並更改從字段中的數據，根據關於用戶點擊了什麼（這是通過jQuery或/和JavaScript完成的）。

Answer 3

這裏似乎沒有必要進行對話，因爲您只需將用戶的id傳遞給控制器​​方法，該方法執行某些操作以「禁止」用戶。

首先一些問題與你html。您不必要地爲foreach循環中的每個用戶生成單獨的表格，並且通過複製按鈕的id屬性來生成無效html。你的觀點也有@model Project.User，但我認爲這是一個錯字和它的真的@model IEnumerable<Project.User>，因爲你不能枚舉一個單一的對象。您認爲應該像

<table> 
    <thead> 
    .... // add table row and th elements 
    </thead> 
    <tbody> 
    @foreach (User user in Model) 
    { 
     <tr> 
     <td>@user.Id</td> 
     <td>@user.Charact</td> 
     <td><button type=button class="banuser" data-id="@user.Id">User Ban</button></td> 
     </tr> 
    } 
    </tbody> 
</table> 

注意使用class名稱，而不是一個id和Id值已被添加到該按鈕爲data-屬性，因此它可以在按鍵.click()處理程序會獲取用戶。

然後添加一個腳本來處理按鈕點擊

var url = '@Url.Action("BansUsers", "Bans")'; 
$('.banuser').click(function() { 
    var id = $(this).data('id'); // get the users Id value 
    $.post(url, { ID: id }, function(response) { 
    if(response) { 
     // do something - see notes below 
    } 
    }).fail(function (result) { 
    // Something went wrong - display error message? 
    }); 
}); 

而且控制方法

[HttpPost] 
public JsonResult BansUsers(int ID) 
{ 
    // call database to update user based on the ID value 
    return Json(true); // signal success 
} 

注意AJAX（$.post()）函數將保持在同一頁上，並允許用戶繼續禁止「其他用戶。在success回調中要考慮的一些選項包括（a）禁用按鈕，即$(this).prop('disabled', true);以防止再次觸發按鈕（b）從表格中移除該行，即$(this).closest('tr').remove();或（c）可能將按鈕更改爲「取消禁用」用戶。您也可以考慮顯示confirm對話框，並且只在操作得到確認後才執行該帖子。