如何在mvc 5中的同一局部视图中单击按钮后在局部视图中绑定数据？ [英] How To bind the data in partial view after click on the button in a same partial view in mvc 5?
问题描述
我有一个视图，我有一个按钮'添加图像'通过点击这个按钮我打开局部视图在这个局部视图中包含所有图像。当我上传图像时，此视图具有文件上载控件，然后我必须在所有图像的列表中添加此图像。我怎么能这样做我发给你我的代码
这是行动方法
< pre lang =c＃> public ActionResult CreateImage（）
{
List< ImageGallery> all = new 列表< ImageGallery>（）;
// 这里MyDatabaseEntities是我们的datacontext
ViewBag.images = Directory.EnumerateFiles（Server.MapPath（ / Images / CategoryImage /））
。选择（fn = > / Images / CategoryImage / + Path.GetFileName（fn））;
foreach （ var image in （IEnumerable< string>）ViewBag.Images）
{
ImageGallery ob = new ImageGallery（）;
ob.FileName = image;
all.Add（ob）;
}
return 查看（ 创建图像，全部）;
}
[HttpPost]
public ActionResult FileUpload（HttpPostedFileBase file）
{
if （file！= null && file.ContentLength > 0 ）
尝试
{
string path = Path.Combine（Server.MapPath（ 〜/ Images / CategoryImage /），
Path.GetFileName（file.FileName））;
file.SaveAs（path）;
return Json（ new
{
Error = false ，
消息= 文件已成功上传..！ !!，
FilePath = file.FileName
}，JsonRequestBehavior.AllowGet）;
}
catch （例外情况）
{
return Json（ new
{
Error = false ，
Message = 文件未上传
}，JsonRequestBehavior.AllowGet）;
}
else
{
ViewBag.Message = 您尚未指定文件。;
}
列表< ImageGallery> all = new 列表< ImageGallery>（）;
// 这里MyDatabaseEntities是我们的datacontext
ViewBag.images = Directory.EnumerateFiles（Server.MapPath（ / Images / CategoryImage /））
。选择（fn = > / Images / CategoryImage / + Path.GetFileName（fn））;
foreach （ var image in （IEnumerable< string>）ViewBag.Images）
{
ImageGallery ob = new ImageGallery（）;
ob.FileName = image;
all.Add（ob）;
}
return 查看（ CreateImage，全部）;
}
这是视图
@ model IEnumerable< MyProject.Models.ImageGallery>
请选择一个文件）;
< script type = text / javascript >
$（function（）{
$（' ＃approve-btn' ）。click（function（）{
$（' ＃modal-container'）。modal（' hide'）;
}）;
}）;
< / script >
@using（Html.BeginForm（ FileUpload， 类别，FormMethod.Post ， new {enctype = multipart / form-data ，@ id = MyForm}））
{
< div id = DOC1 > < / div >
< script >
$（document） 。就绪（乐趣ction（）{
$（ ＃btnUpload）。click（function（）{
if （$（ ＃myFile ）。val（）== ）{
alert（< span class =code-string>
return false ;
}
$（' ＃MyForm'）。ajaxForm（{
complete：function（xhr）{
var ret = $ .parseJSON（xhr.responseText）;
if （ret.Error == false ）{
$（ ＃DOC1）。empty（）;
$（ ＃DOC1）。html（' < iframe src =@ Url .Action（ShowDocument，Category，new {FilePath =_ FileName}）' .replace（ _ FilePath，ret.FilePath）+ ' sty le =宽度：98％;高度：98％>< / iframe>'）;
// $ （＃DOC1）。show（）;
$（ ＃DOC1）。dialog（{
autoOpen： true ，
modal： true ，
身高： 500 ，
宽度： 600 ，
按钮：{
OK：function（）{$（ this ）。dialog（ < span class =code-string> close）;}
}，
title： 文档，
}）;
}
}，
错误：function（）{
window.location.reload（）;
}
}）。submit（）;
}）;
}）;
< / script >
@ Html.AntiForgeryToken（）
< div class = modal-body style = position：fixed;
top：34％;
left：28％;
width：70em;
height：34em;
margin-top：-9em; / *设为负数高度的1/2是* /
margin-left：-15em; / *设置为宽度的1/2的负数* /
border：10px solid＃2DB82D; background-color： #ffffff; >
< h4>添加/修改类别图片< / h4 >
@ * @ if（ViewBag。图片！= null ）
{
foreach （ var image in （IEnumerable< string>）ViewBag.Images）
{
< img src = @ Url.Content（image） alt = Hejsan />
}
} * @
< div 类 = form-group >
< div>
@foreach（ var item in Model）
{
< div>
< img src =@item.FileName alt = image style = width：100px; height：100px; float：left; />
< / div >
} s
< / div >
< / div >
< input type = file name = file id = myFile style = width：100％; />
< input type = submit 值 = 上传 class = btn btn-default id = btnUpload />
< div>
@ Html.ActionLink（ 选择， FileUpload， Category ， null ， new {@class = modal-link btn btn-success}）
< / div >
< div class = col-md-4 col-md-offset-4 >
< button type = button class = btn btn-default
data-dismiss = modal >
取消
< / 按钮 >
@ *< button type = 提交 id = approve-btn
class = btn btn-danger >
保存
< / 按钮 > * @
< / div >
< / div >
}
@section脚本{
@ Scripts.Render（ 〜/ bundles / jqueryval ）
}
请给我解决方案
（function（）{
（' < span class =code-string>＃approve-btn'）。click（function（）{
（' ＃modal-container'）。modal（' 隐藏）;
}）;
}）;
< / script >
@using（Html.BeginForm（ FileUpload， 类别，FormMethod.Post ， new {enctype = multipart / form-data ，@ id = MyForm}））
{
< div id = DOC1 > < / div >
< script >
Hi ,
I Have a View on which i have a button 'Add Image' By the clicking on this button I open a partial view In this partial view with all images . This view have a file upload control when i upload a image then I have to Add this image in the list of all images. how can I do this I am sending to you my code
This is the Action Method
public ActionResult CreateImage()
{
List<ImageGallery> all = new List<ImageGallery>();
// Here MyDatabaseEntities is our datacontext
ViewBag.images = Directory.EnumerateFiles(Server.MapPath("/Images/CategoryImage/"))
.Select(fn => "/Images/CategoryImage/" + Path.GetFileName(fn));
foreach (var image in (IEnumerable<string>)ViewBag.Images)
{
ImageGallery ob = new ImageGallery();
ob.FileName = image;
all.Add(ob);
}
return View("CreateImage",all);
}
[HttpPost]
public ActionResult FileUpload(HttpPostedFileBase file)
{
if (file != null && file.ContentLength > 0)
try
{
string path = Path.Combine(Server.MapPath("~/Images/CategoryImage/"),
Path.GetFileName(file.FileName));
file.SaveAs(path);
return Json(new
{
Error = false,
Message = "File Uploaded Successfully..!!!",
FilePath = file.FileName
}, JsonRequestBehavior.AllowGet);
}
catch (Exception ex)
{
return Json(new
{
Error = false,
Message = "File Not Uploaded"
}, JsonRequestBehavior.AllowGet);
}
else
{
ViewBag.Message = "You have not specified a file.";
}
List<ImageGallery> all = new List<ImageGallery>();
// Here MyDatabaseEntities is our datacontext
ViewBag.images = Directory.EnumerateFiles(Server.MapPath("/Images/CategoryImage/"))
.Select(fn => "/Images/CategoryImage/" + Path.GetFileName(fn));
foreach (var image in (IEnumerable<string>)ViewBag.Images)
{
ImageGallery ob = new ImageGallery();
ob.FileName = image;
all.Add(ob);
}
return View("CreateImage", all);
}
This is the view
@model IEnumerable<MyProject.Models.ImageGallery>
<script type="text/javascript">
$(function () {
$('#approve-btn').click(function () {
$('#modal-container').modal('hide');
});
});
</script>
@using (Html.BeginForm("FileUpload", "Category", FormMethod.Post, new { enctype = "multipart/form-data", @id = "MyForm" }))
{
<div id="DOC1"></div>
<script>
$(document).ready(function () {
$("#btnUpload").click(function () {
if ($("#myFile").val() == "") {
alert("Please select a file");
return false;
}
$('#MyForm').ajaxForm({
complete: function (xhr) {
var ret = $.parseJSON(xhr.responseText);
if (ret.Error == false) {
$("#DOC1").empty();
$("#DOC1").html('<iframe src="@Url.Action("ShowDocument", "Category", new { FilePath = "_FilePath" }) "'.replace("_FilePath", ret.FilePath) + ' style="width: 98%; height: 98%" ></iframe>');
// $("#DOC1").show();
$("#DOC1").dialog({
autoOpen: true,
modal: true,
height: 500,
width: 600,
buttons: {
OK: function () { $(this).dialog("close"); }
},
title: "Document",
});
}
},
error: function () {
window.location.reload();
}
}).submit();
});
});
</script>
@Html.AntiForgeryToken()
<div class="modal-body" style=" position:fixed;
top: 34%;
left: 28%;
width:70em;
height:34em;
margin-top: -9em; /*set to a negative number 1/2 of your height*/
margin-left: -15em; /*set to a negative number 1/2 of your width*/
border: 10px solid #2DB82D; background-color: #ffffff;">
<h4>Add/Edit Category Image</h4>
@*@if (ViewBag.Images != null)
{
foreach (var image in (IEnumerable<string>)ViewBag.Images)
{
< img src = "@Url.Content(image)" alt = "Hejsan" />
}
}*@
<div class="form-group">
<div>
@foreach (var item in Model)
{
<div>
<img src=@item.FileName alt="image" style="width:100px;height:100px; float:left;" />
</div>
}s
</div>
</div>
<input type="file" name="file" id="myFile" style="width: 100%;" />
<input type="submit" value="Upload" class="btn btn-default" id="btnUpload" />
<div>
@Html.ActionLink("Select ", "FileUpload", "Category", null, new { @class = "modal-link btn btn-success" })
</div>
<div class="col-md-4 col-md-offset-4">
<button type="button" class="btn btn-default"
data-dismiss="modal">
Cancel
</button>
@*<button type="submit" id="approve-btn"
class="btn btn-danger">
Save
</button>*@
</div>
</div>
}
@section Scripts {
@Scripts.Render("~/bundles/jqueryval")
}
Please give me the solution
(function () {
('#approve-btn').click(function () {
('#modal-container').modal('hide'); }); }); </script> @using (Html.BeginForm("FileUpload", "Category", FormMethod.Post, new { enctype = "multipart/form-data", @id = "MyForm" })) { <div id="DOC1"></div> <script>
这篇关于如何在mvc 5中的同一局部视图中单击按钮后在局部视图中绑定数据？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
