屏幕被调用两次

时间:2014-10-17 13:11:29

标签: jquery asp.net-mvc-4 visual-studio-2012 c#-5.0

我有这个:

查看:

@model ContosoUniversity.Models.UserProfile
@{
    ViewBag.Title = "Edit";
}

<h2>EDIT</h2>


<div id="tabs">

    <ul>
        <li><a href="#tabs-1">Personal information</a></li>
        <li><a href="#tabs-2">Photos</a></li>
        <li><a href="#tabs-3">The Bike</a></li>
    </ul>

    <div id="tabs-1">


        @using (Html.BeginForm("Edit", "Account", FormMethod.Post, new { enctype = "multipart/form-data" }))
        {
            @Html.AntiForgeryToken()

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



                <form class="form-horizontal">

                    @Html.ActionLink("Change your password", "Manage")


                    <div class="form-group">
                        @Html.LabelFor(m => m.UserName, new { @class = "control-label col-xs-2" })
                        @Html.TextBoxFor(m => m.UserName, new { @class = "form-control", style = "width: 250px;" })
                    </div>



                    <div class="form-group">
                        @Html.LabelFor(m => m.Email, new { @class = "control-label col-xs-2" })
                        @Html.TextBoxFor(m => m.Email, new { @class = "form-control", style = "width: 250px;" })
                    </div>

                    <div class="form-group ">
                        @Html.LabelFor(m => m.FirstName, new { @class = "control-label col-xs-2" })
                        @Html.TextBoxFor(m => m.FirstName, new { @class = "form-control", style = "width: 250px;" })
                    </div>

                    <div class=" form-group">
                        @Html.LabelFor(m => m.LastName, new { @class = "control-label col-xs-2" })
                        @Html.TextBoxFor(m => m.LastName, new { @class = "form-control", style = "width: 250px;" })
                    </div>

                    <div class="form-group">
                        @Html.LabelFor(m => m.Motto, new { @class = "control-label col-xs-2" })
                        @Html.TextAreaFor(m => m.Motto, new { @class = "form-control", style = "width: 250px;" })
                    </div>

                    <div class="form-group">

                        @Html.LabelFor(m => m.PlaceOfBirth, new { @class = "control-label col-xs-2" })
                        @Html.TextBoxFor(m => m.PlaceOfBirth, new { @class = "form-control", style = "width: 250px;" })
                    </div>
                    <div class="form-group">

                        @Html.LabelFor(m => m.HowManyBikes, new { @class = "control-label col-xs-2" })
                        @Html.TextBoxFor(m => m.HowManyBikes, new { @class = "form-control", style = "width: 250px;" })
                    </div>
                    <div class="form-group">
                        @Html.LabelFor(m => m.BesideYourBeth, new { @class = "control-label col-xs-2" })
                        @Html.TextBoxFor(m => m.BesideYourBeth, new { @class = "form-control", style = "width: 250px;" })
                    </div>
                    <div class="form-group">
                        @Html.LabelFor(m => m.NicestRide, new { @class = "control-label col-xs-2" })
                        @Html.TextBoxFor(m => m.NicestRide, new { @class = "form-control", style = "width: 250px;" })
                    </div>

                    <div class="form-group">
                        @Html.LabelFor(m => m.WorstRide, new { @class = "control-label col-xs-2" })
                        @Html.TextBoxFor(m => m.WorstRide, new { @class = "form-control", style = "width: 250px;" })
                    </div>

                    <div class="form-group">
                        @Html.LabelFor(m => m.AmountKmPerYear, new { @class = "control-label col-xs-2" })
                        @Html.TextBoxFor(m => m.AmountKmPerYear, new { @class = "form-control", style = "width: 250px;" })
                    </div>

                    <div class="form-group">
                        @Html.LabelFor(m => m.AverageSpeed, new { @class = "control-label col-xs-2" })
                        @Html.TextBoxFor(m => m.AverageSpeed, new { @class = "form-control", style = "width: 250px;" })
                    </div>

                    <div class="form-group">
                        @Html.LabelFor(m => m.AbleToChatWhileRiding, new { @class = "control-label col-xs-2" })
                        @Html.TextBoxFor(m => m.AbleToChatWhileRiding, new { @class = "form-control", style = "width: 250px;" })
                    </div>

                    <div class="form-group">
                        @Html.LabelFor(m => m.PhoneNumber, new { @class = "control-label col-xs-2" })
                        @Html.TextBoxFor(m => m.PhoneNumber, new { @class = "form-control", style = "width: 250px;" })
                    </div>




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

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

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

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

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

                        <div class="table-responsive">
                            <table class="table">

                                <tr>
                                    <th><img width="200" height="150" src="@Url.Action("GetImage", "Account", new { id = Model.Id })"></th>


                                </tr>
                            </table>
                        </div>

                        <input type="file" name="file" class="filestyle" data-buttontext="Find file">


                    </form>

                    <br />
                    <div class="progress progress-striped">
                        <div class="progress-bar progress-bar-success">0%</div>
                    </div>

                    <div id="status"></div>


                    <br />

                    @*@Html.ActionLink("Upload photos", "Upload")*@
                    <div class="pull-left">
                        <div class="col-md-offset-0">
                            <input type="submit" value="Save" id="Id" class="btn btn-default pull-left" />

                        </div>
                    </div>

                </div>
            }

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

        </div>

    <div id="tabs-3">
        Content for Tab 3 goes here.<br />
        Lorem ipsum dolor sit amet, consectetuer adipiscing elit,
        sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
    </div>

</div>
    </div>




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

@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.form.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 src="@Url.Content("~/Scripts/bootstrap-filestyle.js")" type="text/javascript"></script>
    <script src="@Url.Content("~/Scripts/jquery.form.min.js")" type="text/javascript"></script>

    <script>

        $(document).ready(function () {

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

            //        $(":file").filestyle({ size: "sm" });
            //        $(":file").filestyle({ buttonText: "Find file" });              
            //});
        });

        $(document).ready(function () {

            var bar = $('.progress-bar');
            var percent = $('.progress-bar');
            var status = $('#status');

            $('form').ajaxForm({
                beforeSend: function () {
                    status.empty();
                    var percentVal = '0%';
                    bar.width(percentVal)
                    percent.html(percentVal);
                },
                uploadProgress: function (event, position, total, percentComplete) {
                    var percentVal = percentComplete + '%';
                    bar.width(percentVal)
                    percent.html(percentVal);
                },
                success: function () {
                    var percentVal = '100%';
                    bar.width(percentVal)
                    percent.html(percentVal);
                },
                complete: function (xhr) {
                    status.html(xhr.responseText);
                }
            });

        })();       
    </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 PartialView(userprofile);       

        }

关于tab2

但是在我保存之后,视图呈现了两次,所以我在这一行放了一个断点:

user.Image = new byte[file.ContentLength];,我收到了消息:

An exception of type 'System.NullReferenceException' occurred in ContosoUniversity.dll but was not handled in user code

Additional information: Object reference not set to an instance of an object. file = null

但如果我继续,那么它再次循环并将文件保存到数据库。但是第一次是file = null,但是如果我继续保存文件,那么保存图像后视图现在也会正确显示。

谢谢

上传前

enter image description here

上传后

enter image description here

哦,我把它做得很少。见:

查看:

@model ContosoUniversity.Models.UserProfile
@{
    ViewBag.Title = "Edit";
}

<h2>EDIT</h2>

            @using (Html.BeginForm("EditPhotos", "Account", FormMethod.Post))
            {
                @Html.AntiForgeryToken()
                <input type="file" name="file"><br>
                <input type="submit"  value="Upload File to Server">
            }

<div class="progress progress-striped">
    <div class="progress-bar progress-bar-success">0%</div>
</div>

<div id="status"></div>

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

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

@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.form.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 src="@Url.Content("~/Scripts/bootstrap-filestyle.js")" type="text/javascript"></script>
    <script src="@Url.Content("~/Scripts/jquery.form.min.js")" type="text/javascript"></script>

    <script>



        $(document).ready(function () {


            var bar = $('.progress-bar');
            var percent = $('.progress-bar');
            var status = $('#status')



            $('form').ajaxForm({


                beforeSend: function () {
                    status.empty();
                    var percentVal = '0%';
                    bar.width(percentVal)
                    percent.html(percentVal);
                },
                uploadProgress: function (event, position, total, percentComplete) {
                    var percentVal = percentComplete + '%';
                    bar.width(percentVal)
                    percent.html(percentVal);
                },
                success: function () {
                    var percentVal = '100%';
                    bar.width(percentVal)
                    percent.html(percentVal);
                },
                complete: function (xhr) {
                    status.html(xhr.responseText);
                }
            });

        })();       
    </script>
}

控制器操作:

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

            if (file != null)
            {


                // 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"));

             }
            return View(userprofile);       

        }

但上传图片后仍然看起来像这样:

enter image description here

0 个答案:

没有答案