單擊后在同一頁面的特定div中加載我的局部視圖

Question

我有這個代碼

[AcceptVerbs(HttpVerbs.Get)]
public ActionResult ManageEmployee(int cntID, string command)
{
    repository = new ContactRepository();
    if (!String.IsNullOrEmpty(command) && command.Equals("edit"))
    {
        LKIContact employees = repository.GetById(cntID);

        ViewBag.IsUpdate = true;
        return PartialView("_ManageEmployee", employees);
    }
    else
    {
        ViewBag.IsUpdate = false;
        return PartialView("_ManageEmployee");
    }
}

當我點擊：

<a href='Home/ManageEmployee?cntID=${cntID}&command=edit' class='editDialog'>Edit</a>

當我單擊href='Home/ManageEmployee?cntID=0&command=create' class='openDialog'時，我執行上述方法的第一部分以顯示填充的表單以進行更新href='Home/ManageEmployee?cntID=0&command=create' class='openDialog'我打開空表單以添加新員工。

我現在的問題是，當我單擊“編輯”或“創建”時，我得到了期望的結果，但是在另一個頁面中。 我想要的是在相同的頁面中（位於網格下方）在特定的div中（以下）滑出那些表單。

<div id="dialog-edit"></div>
<div id="dialog-create" style="display: none"></div>

這是我的網格將被加載的代碼以及我希望表單被加載的div的位置

@section featured {
<section class="featured">
    <div class="content-wrapper">
        <!-- the igHierarchicalGrid target element-->
        <table id="employeeGrid" style="width: auto;"></table>
        <p>
            <!--<a id='openDialog' href='Home/CreateEmployee?cntID=0' class='openDialog ui-button ui-widget ui-state-default ui-corner-all ui-button-text-only' style="color: white;"><button>Add Employee</button></a>-->
       </p>
    </div>
</section>

<br />
<div id="dialog-confirm" style="display: none">
    <p>
        <span class="ui-icon ui-icon-alert" style="float: left; margin: 0 7px 20px 0;"></span>
            Are you sure to delete ?
    </p>
</div>

<div id="dialog-edit"></div>

<div id="dialog-view" style="display: none"></div>

}

謝謝您的幫助

Answer 1

您可以使用ajax調用來獲取局部視圖並將其呈現在div中：

<script type="text/javascript">
  $(document).on("click", "#btnEdit", function () {

        $.ajax({
            url: "Home/ManageEmployee?cntID=" + myEmployeeID + "&command=edit";
            cache: false,
            success: function (html) {
                $("#dialog-edit").append(html);
            }
        });

    });
</script>

在頁面底部添加此腳本，將btnEdit替換為您的編輯按鈕的ID，並將MyEmployeeID替換為您要編輯的employeeid。

Answer 2

如果每一行都有一個編輯按鈕，則將EmployeeId包含在鏈接標記中，也許作為數據屬性，這樣

<a href='Home/ManageEmployee?cntID=${cntID}&command=edit' data-employeeid='${cntID}' class='editor'><button>Edit</botton></a>

然后使用來自afzalulh的示例，只需選擇data屬性

<script type="text/javascript">
  $(document).on("click", ".editor", function () {

        var myEmployeeID = $(this).data('employeeid');

        $.ajax({
            url: "Home/ManageEmployee?cntID=" + myEmployeeID + "&command=edit";
            cache: false,
            success: function (html) {
                $("#dialog-edit").append(html);
            }
        });

    });
</script>