0

我正在尝试使用与此类似的部分视图更新我的部分页面。我可以通过单击“删除”来删除部分视图 - 所以我的 jquery 在那里工作，但是我无法添加部分视图的另一行。当我单击链接以“添加另一行”时，我会进入一个仅显示返回的 html 的页面，而不是将该数据附加到我当前的视图中。

这是我的主要观点：

@model MyApp.ViewModels.ApplicationViewModel
@{
    ViewBag.Title = "ApplyToSomething";
}
<script src="@Url.Content("~/Scripts/jquery.validate.min.js")" type="text/javascript"> </script>
<script src="@Url.Content("~/Scripts/jquery.validate.unobtrusive.min.js")" type="text/javascript"> </script>
<script src="@Url.Content("~/Scripts/MyJqueryAjaxFile.js")" type="text/javascript"> </script>

@using (Html.BeginForm())
{
    @Html.ValidationSummary(true)
    <fieldset>
        <legend>Apply To Something</legend>

        <div class="editor-label">
            @Html.LabelFor(model => model.LastName)
            @Html.DisplayFor(model => model.LastName)
        </div>

        <div class="editor-label">
            @Html.LabelFor(model => model.EducationalBackground)
        </div>

        //
        // THIS IS THE SECTION I AM HAVING PROBLEMS WITH
        <div id = "editorRows">
            @Html.Partial("_EducationalBackground")
            <!-- PUT ADDITIONAL PARTIAL VIEWS HERE -->
        </div>

        @Html.ActionLink("Add another row", "EducationalBackground", null, new {id = "addItem"})

        <div class="editor-label">
            @Html.LabelFor(model => model.WillingToTravel)
        </div>
        <div clsas="editor-field">
            @Html.EditorFor(model => model.WillingToTravel)
            @Html.ValidationMessageFor(model => model.WillingToTravel)
        </div>

        <p>
            <input type="submit" value="Create" />
        </p>
    </fieldset>
}

这是我的部分观点：

@model MyApp.ViewModels.ApplicationViewModel
@using (Html.BeginForm())
{
@Html.ValidationSummary(true)
    <div class="editorRow">
        @Html.EditorFor(model => model.UniversityOrCollege)
        @Html.ValidationMessageFor(model => model.UniversityOrCollege)
    <p>
        <a href="#" class="deleteRow">delete</a>
    </p>
    </div>
}

这是我的 .js 文件：

$("#addItem").click(function () {
    $.ajax({
        url: this.href,
        cache: false,
        success: function (html) { $("#editorRows").append(html); }
    });
    return false;
});

$("a.deleteRow").live("click", function () {
    $(this).parents("div.editorRow:first").remove();
    return false;
});

这是我的控制器操作：

public ActionResult Apply()
{
    // I generate data for model. . .
    return View(model);
}

public PartialViewResult EducationalBackground()
{
    return PartialView("_EducationalBackground", new ApplicationViewModel());
}

这是视图 Html 的 ViewSource 的精确复制/粘贴（请注意，它列出了实际值而不是“MyApp”之类的内容）：

        <div class="editor-label">
            <label for="EducationalBackground">EducationalBackground</label>
        </div>
        <div id = "editorRows">
            <h2>_EducationalBackground</h2>
<form action="/InstructorApplication/ApplyToBecomeInstructor" method="post">    <div class="editorRow">
        <input class="text-box single-line" id="UniversityOrCollege" name="UniversityOrCollege" type="text" value="" />
        <span class="field-validation-valid" data-valmsg-for="UniversityOrCollege" data-valmsg-replace="true"></span>
    <p>
        <!--<a href="/InstructorApplication/%23?class=deleteRow">deleteRow</a>-->
        <a href="#" class="deleteRow">delete</a>
    </p>
    </div>
</form>
            <!-- PUT PARTIAL VIEWS HERE -->
        </div>

        <a href="/InstructorApplication/EducationalBackground" id="addItem">Add another row</a>

为什么我的“添加另一行”链接将我带到另一个视图，而不是将数据附加到我当前的视图？

4

2 回答 2

1 
$("#addItem").click(function () {
    $.ajax({
        url: this.href,
        cache: false,
        success: function (data) { $("#editorRows").append(data);  return false;}
    });
    return false;
});
于 2012-06-06T11:26:45.140 回答
1

尝试将事件传递给回调函数并尝试执行event.preventDefault() http://api.jquery.com/event.preventDefault/

$("#addItem").click(function (event) {
    event.preventDefault();
    $.ajax({
        url: this.href,
        cache: false,
        success: function (data) { $("#editorRows").append(data);}
    });
});

这将阻止默认事件。

于 2012-06-06T11:45:06.247 回答