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

イベントをコールバック関数に渡して、 http://api.jquery.com/event.preventDefault/を実行してみてください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 に答える
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 に答える