ajax调用,但屏幕仍然会弹出
ajax call, but screen still goes up
我有这个:
视图:
<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);
}
OK,我可以保存照片,当我保存照片时,当前选项卡保持选中的选项卡。但保存后,屏幕会弹出。所以这似乎是一个完整的后防线,而不是部分后防线。因为在我保存之前,我看到了三个选项卡。但在我保存后,标签会弹出。但我会调用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>
然后什么也没发生,
我没有看到您发布的ajax代码,但您的按钮是一个提交按钮,而不仅仅是一个按钮。你需要把它改成
<input type="button" value="Save" class="btn btn-default pull-left" />
并在脚本中将事件更改为点击事件
$(document).on("click", ".btn", function(){
...
相关文章:
- 如何使jQuery插件函数可调用以供独立使用,而不在集合上操作
- D3在一个调用中绘制不同的SVG形状,没有可见性
- 如何从Java/scala调用js美化程序
- 使用同步ajax调用加载屏幕
- 如何在Phonegap中进行AJAX调用时添加加载屏幕
- 有没有一种方法可以用jQuery捕获JavaScriptPageMethods调用?(显示加载屏幕)
- 如何在调用模型提取时在主干中创建加载屏幕
- 仅当屏幕上显示 <1000 像素时调用 JS 函数
- 函数调用后,角度示波器未在屏幕上实时更新
- Greasemonkey(使用waitForKeyElements实用程序)-如何在屏幕上显示特定元素后调用函数
- ajax调用,但屏幕仍然会弹出
- 如果设备屏幕关闭,Ajax调用将在iPhone上失败
- requestAnimationFrame调用是否总是被抑制到60 FPS.只要屏幕准备重新绘制,就会调用
- jQuery调用的CSS3加载屏幕
- Bootstrap tabcollapse在小屏幕上不能用于ajax调用
- 我如何以编程方式调用;打印预览"屏幕使用Javascript或Jquery
- 如何根据屏幕宽度调用函数
- 调用屏幕大小的样式表,而不会影响正常的屏幕大小
- 如何在Node.js中清除函数调用之间的Windows 7控制台屏幕?
- 在特定屏幕尺寸下调用脚本