ajax电话,但屏幕仍然上升

时间:2014-10-16 14:06:57

标签: javascript c# asp.net-mvc-4 asp.net-ajax

我有这个:

查看:

<div id="tabs-2">
        @using (Ajax.BeginForm("EditPhotos", "Account",
        new AjaxOptions()
        {
            InsertionMode = InsertionMode.Replace,
            HttpMethod = "Post",
        },
            new { enctype = "multipart/form-data"}





        ))

             //new { enctype = "multipart/form-data" }))
        {
            @Html.AntiForgeryToken()

            <div class="form-horizontal">
                <h4>Photos</h4>
                <hr />
                @Html.ValidationSummary(true)
                @Html.HiddenFor(model => model.Id)



                <form class="form-horizontal">

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

                    </div>

                    <div id="upload-choices">
                        <div class="editor-label">
                            @Html.LabelFor(m => m.Image)

                            @Html.ValidationMessageFor(model => model.Image)
                        </div>
                        <div class="editor-row">
                            @Html.ValidationSummary(true)
                        </div>
                    </div>

                    <br />


                    <img width="200" height="150" src="@Url.Action("GetImage", "Account", new { id = Model.Id })">
                    <input type="file" name="file" />
                </form>
                <br />
                <div class="pull-left">
                    <div class="col-md-offset-0">
                        <input type="submit" value="Save" class="btn btn-default pull-left" />

                    </div>
                </div>
            </div>
        }

        <br /><br />
        <div>
            @Html.ActionLink("Back to List", "Index")
        </div>

    </div>

和jquery:

 @section Scripts
    {
        <link href="@Url.Content("~/Content/themes/base/jquery-ui.css")" rel="stylesheet" type="text/css" />
        <link href="@Url.Content("~/Content/Site.css")" rel="stylesheet" type="text/css" />
        <script src="@Url.Content("~/Scripts/jquery-1.11.0.min.js")" type="text/javascript"></script>
        <script src="@Url.Content("~/Scripts/jquery-ui-1.10.4.min.js")" type="text/javascript"></script>
        <script src="@Url.Content("~/Scripts/jquery.unobtrusive-ajax.min.js")" type="text/javascript"></script>
        <script>
            $(document).ready(function () {
                $("#tabs").tabs();

                $("#tabs").tabs("select", window.location.hash);

                //var param = $(document).getUrlParam('selectedTab');
                //$('#tabs').tabs('select', param);
            });
        </script>
}

和控制器操作方法:

[HttpPost]
        public ActionResult EditPhotos(UserProfile userprofile,HttpPostedFileBase file)
        {

            if (file != null && file.ContentLength > 0)
            {


                // extract only the fielname
                var fileName = Path.GetFileName(file.FileName);
                // store the file inside ~/App_Data/uploads folder
                var path = Path.Combine(Server.MapPath("~/App_Data/uploads"), fileName);
                file.SaveAs(path);
            }

             if (ModelState.IsValid)
             {
                 string username = User.Identity.Name;
                // Get the userprofile
                UserProfile user = db.userProfiles.FirstOrDefault(u => u.UserName.Equals(username));

                // Update fields
                user.Image = new byte[file.ContentLength];
                file.InputStream.Read(user.Image, 0, file.ContentLength);
                user.ImageMimeType = file.ContentType;

                db.Entry(user).State = EntityState.Modified;

                db.SaveChanges();

                return Redirect(Url.Action("Edit", "Account") + "#tabs-2");

             }
            return View(userprofile);       

        }

oke,我可以保存照片,当我保存照片时,当前标签会保留所选标签。但保存后屏幕上升。所以这似乎是一个完整的帖子,而不是部分回发。在我保存之前我看到了三个标签。但是在我保存标签后弹出。但我做了一个ajax电话。那怎么可能呢?

谢谢

哦,我现在就这样:

@section Scripts
{
    <link href="@Url.Content("~/Content/themes/base/jquery-ui.css")" rel="stylesheet" type="text/css" />
    <link href="@Url.Content("~/Content/Site.css")" rel="stylesheet" type="text/css" />
    <script src="@Url.Content("~/Scripts/jquery-1.11.0.min.js")" type="text/javascript"></script>
    <script src="@Url.Content("~/Scripts/jquery-ui-1.10.4.min.js")" type="text/javascript"></script>
    <script src="@Url.Content("~/Scripts/jquery.unobtrusive-ajax.min.js")" type="text/javascript"></script>
    <script>
        $(document).ready(function () {

                $("#tabs").tabs();
                $(document).on("click", ".btn", function () {
                $("#tabs").tabs("select", window.location.hash);

                //var param = $(document).getUrlParam('selectedTab');
                //$('#tabs').tabs('select', param);
            });
        });
    </script>
}

因为如果我喜欢这样:

 $(document).on("click", ".btn", function () {

                $("#tabs").tabs();

                $("#tabs").tabs("select", window.location.hash);

                //var param = $(document).getUrlParam('selectedTab');
                //$('#tabs').tabs('select', param);
            });

我再也看不到标签了

我有这个:

<div class="pull-left">
            <div class="col-md-offset-0">
                <input type="button" value="Save" class="btn btn-default pull-left" />

            </div>
        </div>
    </div>

但你是什么意思,你没有看到Ajax电话?

我有这个:

<div id="tabs-2">
        @using (Ajax.BeginForm("EditPhotos", "Account",
        new AjaxOptions()
        {
            InsertionMode = InsertionMode.Replace,
            HttpMethod = "Post",
        },
            new { enctype = "multipart/form-data"}





        ))

             //new { enctype = "multipart/form-data" }))
        {
            @Html.AntiForgeryToken()

            <div class="form-horizontal">
                <h4>Photos</h4>
                <hr />

等...

但保存后,屏幕仍会亮起

好吧,我现在就这样:

 $(document).ready(function () {

            $.ajax({
                url: resolveUrl("/Account/EditPhotos/"),
                type: "POST",
                processData: false,
                contentType: false,
                data: data,
                success: function (response) {
                    //code after success

                },
                error: function (er) {
                    alert(er);
                }

            });


        });

但页面仍在上升

如果我这样做:

$(document).on("click", ".btn", function(){

        $("#ajaxUploadForm").ajaxForm({
            iframe: true,
            type: 'POST',
            dataType: "json",
            cache: false,
            timeout: 1200000,
            async: false,
            beforeSubmit: function () {
                //Do something here if needed like show in progress message
            },
            //success: function (result) {
            //    alert("sucess"
            //    },
            error: function (xhr, textStatus, errorThrown) {
                alert("Error uploading file");
            }
        });
        });

使用:

 <div class="pull-left">
                    <div class="col-md-offset-0">
                        <input type="button" value="Save" class="btn btn-default pull-left" />

                    </div>
                </div>
然后没有任何反应,

1 个答案:

答案 0 :(得分:0)

我没有看到你发布的ajax代码,但你的按钮是一个提交按钮,而不仅仅是一个按钮。你需要将其改为

<input type="button" value="Save" class="btn btn-default pull-left" />

并在您的脚本中将事件更改为单击事件

$(document).on("click", ".btn", function(){
    ...