Обновление DIV с частичным представлением по нажатию кнопки (динамическое)

Question

Поэтому я хочу сделать что-то почти такое же, как вы найдете здесь: http://www.makeitspendit.com/calling-asp-mvc-controllers-from-jquery-ajax/

Это будет делать именно то, что я хочу, но сценарий, написанный для всех 4 кнопок, не очень СУХОЙ. (Ну совсем не СУХОЙ)

Я хотел бы иметь один сценарий для вызова правильного представления, основанного на идентификаторе кнопки, так что код должен был бы быть на моей странице только один раз. Я попытался передать this.id в вызов функции и использовать конкатенацию в свойстве "url:" вызова ajax, но это не сработало.
ПРИМЕР:

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

Надеюсь это поможет.