单击按钮时使用局部视图更新DIV(动态) [英] Update a DIV with a Partial View on Button Click (dynamic)
问题描述
因此,我想做的事情几乎与您在此处找到的完全一样: http://www.makeitspendit.com/calling-asp-mvc-controllers-from-jquery-ajax/
它完全可以实现我想要的功能,但是为所有4个按钮写出相同的脚本不是很干.(嗯,一点也不干)
我希望有一个脚本可以根据按钮的ID调用正确的视图,因此代码只需在我的页面上出现一次.我尝试将this.id传递到函数调用中,并在ajax调用的"url:"属性中使用串联,但这是行不通的.
示例:
< div id ="projectDiv">< button onclick ="loadProject(this.id)" id ="_ Project1">项目1</button>< button onclick ="loadProject(this.id)" id ="_ Project2">项目2</button>< script>函数loadProject(projectID){$ .ajax({网址:("/Projects/Project/" + projectID),数据类型:文本",输入:"POST",成功:功能(数据){$('#projectDiv').html(data);},});});</script>
在控制器中:
[HttpPost]公共ActionResult项目(字符串ID){返回View(id);}
我已经四处搜寻,发现了类似的东西(但不够相似,无法得出我需要的东西),但是找不到这种情况-我认为这种情况很常见,可以获取更多信息./p>
示例代码说明了我将如何使用它,但是我似乎无法像这样将变量传递到url属性中.虽然我对ASP.NET MVC相当陌生,但这似乎应该是非常基本的,但我对此仍然停留了一分钟.
目前,我意识到这篇文章已有一年多的历史了,但是我想根据对原始问题的评论,添加一个更完整的答案,像我这样的人偶然发现它.
在我的/Views/Shared/
文件夹中,我有 _YourPartialName.cshtml
在我的 HomeController.cs
中,我有:
[HttpPost]公共PartialViewResult AddPartialToView(字符串ID){返回PartialView(id);}
在我的 MainView.cshtml
中,我有:
...< div id ="placeHolderDiv"></div>< div class ="form-group">< button class ="btn" type ="button" onclick ="replaceContentsOfDiv(this.id)" id ="_ YourPartialName">在此上方添加部分视图</button></div>...< script>函数replaceContentsOfDiv(partialViewToInsert){$ .ajax({url:'@ Url.Action("AddPartialToView","Home")',数据:{id:partialViewToInsert},输入:"POST",成功:功能(数据){$('#placeHolderDiv').html(data);}});}</script>
这将导致:
< div id ="placeHolderDiv"><无论class =您在自己的部分中所拥有的"></随便什么></div>
希望这会有所帮助.
So I want to do something almost exactly like you find here: http://www.makeitspendit.com/calling-asp-mvc-controllers-from-jquery-ajax/
It will do exactly what I want it to do, but having the same script written out for all 4 buttons is not very DRY. (Well, not DRY at all)
I would like to have one script to call the correct view based on the ID of the button, so that code would only have to be on my page once.
I tried passing this.id into the function call, and using concatenation in the "url:" property of the ajax call but that doesn't work.
EXAMPLE:
<div id="projectDiv">
<button onclick="loadProject(this.id)" id="_Project1">Project 1</button>
<button onclick="loadProject(this.id)" id="_Project2">Project 2</button>
<script>
function loadProject(projectID) {
$.ajax({
url: ("/Projects/Project/"+projectID),
datatype: "text",
type: "POST",
success: function (data) {
$('#projectDiv').html(data);
},
});
});
</script>
And in the controller:
[HttpPost]
public ActionResult Project(string id)
{
return View(id);
}
I've searched all over for this and found similar things (but not similar enough to derive what I need) but couldn't find this scenario -- which I would've assumed was common enough to have more information.
The example code illustrates how I would LIKE it to work, but I can't seem to pass the variable into the url property like that. While I am admittedly pretty new to ASP.NET MVC, this seems like it should be pretty basic and yet I've been stuck on this for a minute.
I realize this post is over a year old at this point, but I wanted to add a more complete answer based off the comments made on the original question, in case others like me stumble across it.
In my /Views/Shared/
folder I have _YourPartialName.cshtml
In my HomeController.cs
I have:
[HttpPost]
public PartialViewResult AddPartialToView(string id)
{
return PartialView(id);
}
In my MainView.cshtml
I have:
...
<div id="placeHolderDiv">
</div>
<div class="form-group">
<button class="btn" type="button" onclick="replaceContentsOfDiv(this.id)" id="_YourPartialName">Add A Partial View Above This</button>
</div>
...
<script>
function replaceContentsOfDiv(partialViewToInsert) {
$.ajax({
url: '@Url.Action("AddPartialToView", "Home")',
data: { id: partialViewToInsert},
type: "POST",
success: function(data) {
$('#placeHolderDiv').html(data);
}
});
}
</script>
This will result in:
<div id="placeHolderDiv">
<whatever class="you had in your partial">
</whatever>
</div>
Hope this helps.
这篇关于单击按钮时使用局部视图更新DIV(动态)的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!