0

我有一个视图,用户可以在其中编辑他的个人资料,如下所示

@using (Html.BeginForm("EditProfile", "Profile", FormMethod.Post, new { @class = "form-horizontal" }))
{<div class="container">
     @if (!string.IsNullOrWhiteSpace(Model.ProfileDetails.ProfileError))
        {
            <div class="alert alert-error">
                <a class="close" data-dismiss="alert" href="#">x</a>     
@Html.DisplayFor(m => m.ProfileDetails.ProfileError).ToString()
            </div>
        }
    <div class="row">
        <div class="well span6 offset0">
            <div class="control-group">
                <label class="control-label">Username</label>
                <div class="controls">
                    @Html.TextBoxFor(m => m.ProfileDetails.UserName, new { @placeholder = "Username", data_role = "Username", @maxlength = "25" })
                </div>
            </div>
            <div class="control-group">
                <label class="control-label">Firstname</label>
                <div class="controls">
                    @Html.TextBoxFor(m => m.ProfileDetails.Firstname, new { @placeholder = "Firstname", @maxlength = "25" })
                </div>
            </div>
            <div class="control-group">
                <label class="control-label">Surname</label>
                <div class="controls">
                    @Html.TextBoxFor(m => m.ProfileDetails.Surname, new { @placeholder = "Surname", @maxlength = "25" })
                </div>
            </div>
            <div class="control-group">
                <label class="control-label">Email Address</label>
                <div class="controls">
                    @Html.TextBoxFor(m => m.ProfileDetails.EmailAddress, new { @placeholder = "Email Address", @maxlength = "50" })
                </div>
            </div>
        </div>
        <div class="well span6">
            <div class="control-group">
                <label class="control-label">Gender</label>
                <div class="controls">
                    @Html.DropDownListFor(x => x.ProfileDetails.Gender, Model.ProfileDetails.UsersGender)
                </div>
            </div>
            <div class="control-group">
                <label class="control-label">Date of Birth</label>
                <div class="controls">
                    @Html.TextBoxFor(m => m.ProfileDetails.DateOfBirth, new { @placeholder = "Date of Birth", @class = "form_datetime", @maxlength = "10" })
                </div>
            </div>
            <div class="control-group">
                <label class="control-label">Height</label>
                <div class="controls">
                    @Html.DropDownListFor(x => x.ProfileDetails.UsersHeight, Model.ProfileDetails.UsersHeightList)
                </div>
            </div>
            <div class="control-group">
                <label class="control-label">Current Gym</label>
                <div class="controls">
                    @Html.DropDownListFor(x => x.ProfileDetails.CurrentGym, Model.ProfileDetails.UsersGymList)
                </div>
            </div>
        </div>
    </div>
    <div class="row ">
        <div class="control-group offset0">
            <label class="control-label">About Me</label>
            <div class="controls span8">
                @Html.TextAreaFor(m => m.ProfileDetails.AboutMe, new { @placeholder = "About me, describe your self", @maxlength = "1000" })
            </div>
        </div>
        <div class="control-group offset0">
            <label class="control-label">Interests</label>
            <div class="controls span8">
                @Html.TextAreaFor(m => m.ProfileDetails.Interests, new { @placeholder = "Interests, what do you like doing?", @maxlength = "1000" })
            </div>
        </div>
    </div>
</div>

<p>
    <input type="submit" value="Save Profile" class="btn btn-block btn-success" />
</p> 

}

现在理想情况下,我希望用户上传自己的图像并显示如下http://www.bootsnipp.com/snipps/thumbnails-like-bootsnipp

现在这个上传图片部分可能会在网站上的其他地方使用,所以我认为理想的使用方式是局部视图,但是当我使用 Html.AjaxBeginForm 创建局部视图时,当我按下上传按钮时,它会在页面上呈现它返回时会转到相关的控制器,它会丢失所有样式/页面等,所以我只剩下屏幕上的部分视图?

在我看来,我设想用户可以上传保存到数据库的图像并返回视图,而无需重建孔页

我查看了以下插件http://blueimp.github.io/jQuery-File-Upload/它是一个很好的工具,我向创建它的人致敬,但我正在寻找更轻量级的东西。

以上可能吗?

感谢。

更新 我已将上述文件上传器插入我的网站

http://blueimp.github.io/jQuery-File-Upload/

但是当它保存图像并返回我刚刚上传的图像时,它不再是缩略图了吗?

我已经检查了我的 js 文件,以确保根据我下载的演示以正确的顺序出现并且它们匹配

<meta charset="utf-8" />
<title>EditProfile</title>
<link href='http://fonts.googleapis.com/css?family=Open+Sans:400,400italic' rel='stylesheet' type='text/css' />
<link href="/Content/Site.css" rel="stylesheet" type="text/css" />


<link href="/Content/bootstrap/css/bootstrap.css" rel="stylesheet" type="text/css" />
<link href="/Content/bootstrap/css/bootstrap-responsive.css" rel="stylesheet" type="text/css" />
<link href="/Content/bootstrap/css/bootstrap-datepicker.css" rel="stylesheet" type="text/css" />
<link href="/Content/bootstrap/css/bootstrap-image-gallery.min.css" rel="stylesheet" type="text/css" />
<link href="../../Content/jquery.fileupload-ui.css" rel="stylesheet" type="text/css" />
<script src="/Scripts/jquery-1.7.1.min.js" type="text/javascript"></script>
<script src="/Scripts/jquery-ui-1.8.20.min.js" type="text/javascript"></script>
<script src="../../FileUpload/tmpl.min.js" type="text/javascript"></script>
<script src="../../FileUpload/canvas-to-blob.min.js" type="text/javascript"></script>
<script src="../../FileUpload/load-image.min.js" type="text/javascript"></script>


<script src="../../Content/bootstrap/js/bootstrap-image-gallery.min.js" type="text/javascript"></script>
<script src="/Content/bootstrap/js/bootstrap.min.js" type="text/javascript"></script>
<script src="/Content/bootstrap/js/bootstrap-dropdown.js" type="text/javascript"></script>
<script src="/Content/bootstrap/js/bootstrap-datepicker.js" type="text/javascript"></script>
<script src="/Scripts/modernizr-2.5.3.js" type="text/javascript"></script>
<script src="/Scripts/jquery-mygymdate.js" type="text/javascript"></script>



<script src="../../FileUpload/jquery.iframe-transport.js" type="text/javascript">   </script>
<script src="../../FileUpload/jquery.fileupload.js" type="text/javascript"></script>
<script src="../../FileUpload/jquery.fileupload-ip.js" type="text/javascript"></script>
<script src="../../FileUpload/jquery.fileupload-ui.js" type="text/javascript"></script>
<script src="../../FileUpload/locale.js" type="text/javascript"></script>
<script src="../../FileUpload/main.js" type="text/javascript"></script>

谁能发现任何会导致图像全尺寸而不是缩略图的东西?

4

0 回答 0