单击按钮时使用部分视图更新 DIV（动态）

Question

所以我想做的事情几乎与您在这里找到的一样： 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">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>

在控制器中：

[HttpPost]
public ActionResult Project(string id)
{
    return View(id);
}

我已经对此进行了全面搜索，发现了类似的东西（但不够相似，不足以得出我需要的东西），但找不到这种情况——我认为这种情况很常见，足以提供更多信息。

示例代码说明了我希望它如何工作，但我似乎无法像那样将变量传递到 url 属性中。虽然我确实对 ASP.NET MVC 很陌生，但这似乎应该是非常基本的，但我已经在这个问题上停留了一分钟。

Answer 1

我意识到这篇文章已经有一年多了，但我想根据对原始问题的评论添加一个更完整的答案，以防像我这样的其他人偶然发现它。

在我的/Views/Shared/文件夹中有_YourPartialName.cshtml

在我的HomeController.cs我有：

[HttpPost]
public PartialViewResult AddPartialToView(string id)
{
    return PartialView(id);
}

在我的MainView.cshtml我有：

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

这将导致：

<div id="placeHolderDiv">
    <whatever class="you had in your partial">
    </whatever>
</div>

希望这可以帮助。