单击按钮时使用局部视图更新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屋！