Question

我尝试使用ajax编写CRUD操作。这里有一些代码：这些是我的View类：

//PhotoSummary
@model PhotoAlbum.WEB.Models.PhotoViewModel
<div class="well">
    <h3>
        <strong>@Model.Name</strong>
        <span class="pull-right label label-primary">@Model.AverageRaiting.ToString("# stars")</span>
    </h3>
    <span class="lead">@Model.Description</span>
    @Html.DialogFormLink("Update", Url.Action("UpdatePhoto", new {photoId = @Model.PhotoId}), "Update Photo", @Model.PhotoId.ToString(), Url.Action("Photo"))
</div>

//Main View
@model PhotoAlbum.WEB.Models.PhotoListViewModel
@{
    ViewBag.Title = "My Photos";
}
@foreach (var p in @Model.Photos)
{
    <div id=@p.PhotoId>
        @Html.Action("Photo", new {photo = p})
    </div>
}

sript：

$('.dialogLink').on('click', function () {
    var element = $(this);       
    var dialogTitle = element.attr('data-dialog-title');
    var updateTargetId = '#' + element.attr('data-update-target-id');
    var updateUrl = element.attr('data-update-url');
    var dialogId = 'uniqueName-' + Math.floor(Math.random() * 1000)
    var dialogDiv = "<div id='" + dialogId + "'></div>";

    $(dialogDiv).load(this.href, function () {
        $(this).dialog({
            modal: true,
            resizable: false,
            title: dialogTitle,
            close: function () { $(this).empty(); },
            buttons: {
                "Save": function () {
                    // Manually submit the form                        
                    var form = $('form', this);
                    $(form).submit();
                },
                "Cancel": function () { $(this).dialog('close'); }
            }
        });

        $.validator.unobtrusive.parse(this);
        wireUpForm(this, updateTargetId, updateUrl);
    });
    return false;
});});


function wireUpForm(dialog, updateTargetId, updateUrl) {
    $('form', dialog).submit(function () {
        if (!$(this).valid())
            return false;
        $.ajax({
            url: this.action,
            type: this.method,
            data: $(this).serialize(),
            success: function (result) {

                if (result.success) {
                    $(dialog).dialog('close');
                    $(updateTargetId).load(updateUrl);
                } else {             
                    $(dialog).html(result);
                    $.validator.unobtrusive.parse(dialog);

                    wireUpForm(dialog, updateTargetId, updateUrl);
                }
            }
        });
        return false;
    });
}

这是我的标记构建器：

    public static MvcHtmlString DialogFormLink(this HtmlHelper htmlHelper, string linkText, string dialogContentUrl,
         string dialogTitle, string updateTargetId, string updateUrl)
    {
        TagBuilder builder = new TagBuilder("a");
        builder.SetInnerText(linkText);
        builder.Attributes.Add("href", dialogContentUrl);
        builder.Attributes.Add("data-dialog-title", dialogTitle);
        builder.Attributes.Add("data-update-target-id", updateTargetId);
        builder.Attributes.Add("data-update-url", updateUrl);
        builder.AddCssClass("dialogLink");
        return new MvcHtmlString(builder.ToString());
    }

因此，如果在没有刷新调用页面的情况下调用对话框，则会出现重大问题：它只是将我重定向到操作页面。问题是如何在不重新加载页面的情况下更新@ Html.Action？有谁可以帮助我？

Answer 1

主视图中的document.getElementByTagName("form").submit();循环为每个@foreach生成部分视图，而后者又创建了Photo的链接。

您的脚本会处理这些链接的点击事件，并将其替换为class="dialogLink"的新链接。但是新链接没有class="dialogLink"处理程序，因此单击新（替换）链接不会激活您的脚本。

相反，您需要使用事件委派来使用.on()方法处理动态生成内容的事件（有关事件委派的更多信息，请参阅here）。另请注意，您当前使用的.click()相当于$('.dialogLink').on('click', function () {，并且未使用事件委派。它将一个处理程序附加到页面加载时存在于DOM中的元素，而不是将来可能添加的元素。

将您的HTML更改为

$('.dialogLink').click(function () {

然后将脚本修改为

<div id="photos">
    @foreach (var p in @Model.Photos)
    {
        <div class="photo">@Html.Action("Photo", new { photo = p })</div>
    }
</div>

附注：没有必要向包含$('#photos').on('click', '.dialogLink', function() { .... });元素添加id=@p.PhotoId，您可以按上述方式使用div，然后使用{{1从您的<div class="photo">方法

中删除var updateTargetId = $(this).closest('.photo');代码行

Jquery点击没有工作两次

1 个答案: