[英]Load my partial view in a specific div at the same page after a click
I have this code 我有这个代码
[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");
}
}
When I click on : 当我点击:
<a href='Home/ManageEmployee?cntID=${cntID}&command=edit' class='editDialog'>Edit</a>
I execute the first part of the above method to display my populated form for update when I click on href='Home/ManageEmployee?cntID=0&command=create' class='openDialog'
I open the empty form to add a new employee. 当我单击
href='Home/ManageEmployee?cntID=0&command=create' class='openDialog'
时,我执行上述方法的第一部分以显示填充的表单以进行更新href='Home/ManageEmployee?cntID=0&command=create' class='openDialog'
我打开空表单以添加新员工。
My problem now is that when I click on edit or create I have the desired result but in another page. 我现在的问题是,当我单击“编辑”或“创建”时,我得到了期望的结果,但是在另一个页面中。 What I want is to slide out those forms in the specific divs (below) while staying at the same page.(under the grid)
我想要的是在相同的页面中(位于网格下方)在特定的div中(以下)滑出那些表单。
<div id="dialog-edit"></div>
<div id="dialog-create" style="display: none"></div>
here is the code where my grid will be loaded and the location of the divs where I want my forms to be loaded 这是我的网格将被加载的代码以及我希望表单被加载的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>
}
Thank you for your help 谢谢您的帮助
You can use ajax call to get partial view and render it in your div: 您可以使用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>
Add this script at the bottom of your page, replace btnEdit
with the id of your edit button and replace the MyEmployeeID
with the employeeid you want to edit. 在页面底部添加此脚本,将
btnEdit
替换为您的编辑按钮的ID,并将MyEmployeeID
替换为您要编辑的employeeid。
If you have an edit button for each row, you would include the EmployeeId within the link tag, perhaps as a data attribute so 如果每一行都有一个编辑按钮,则将EmployeeId包含在链接标记中,也许作为数据属性,这样
<a href='Home/ManageEmployee?cntID=${cntID}&command=edit' data-employeeid='${cntID}' class='editor'><button>Edit</botton></a>
Then using the example from afzalulh just pick up on the data attribute 然后使用来自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>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.