次のようにユーザーが自分のプロファイルを編集できるビューがあります
@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>
サムネイルの代わりに画像がフルサイズになる原因を見つけられる人はいますか?