[英]Modal window create from Partial View (ASP.NET MVC)
I have View where I display list of Emails 我在查看电子邮件列表的位置查看
I need to create new record in table using modal window and Partial View. 我需要使用模态窗口和部分视图在表中创建新记录。
Here is code of Partial View 这是部分视图的代码
@model SmartSolutions.Models.Question
<div>
<div class="form-group" style="text-align:center;padding-bottom: 40px; padding-top: 30px;">
@Html.TextAreaFor(m => m.question, new { @class = "form-control", placeholder = "Вопрос", id = "question" })
</div>
<div class="form-group" style="text-align:center;padding-bottom: 40px; padding-top: 30px;">
@Html.TextAreaFor(m => m.TimeForAnswer, new { @class = "form-control", placeholder = "Время на ответ", id = "answer" })
</div>
<div class="form-group" style="text-align:center;padding-bottom: 40px; padding-top: 30px;">
@Html.TextAreaFor(m => m.TimeForReady, new { @class = "form-control", placeholder = "Время на подготовку" , id = "prepare" })
</div>
<div class="form-group" style="text-align:center;padding-bottom: 40px; padding-top: 30px;">
@Html.TextAreaFor(m => m.Retries, new { @class = "form-control", placeholder = "Попытки", id = "retries" })
</div>
<div class="form-group" style="text-align:center">
<input type="button" id="save" value="Создать" class="btn btn-default" style="margin-right: 40px;" />
</div>
</div>
<script>
$(document).ready(function () {
$('#save').click(function () {
save();
});
});
function save() {
$.ajax({
type: 'Post',
dataType: 'Json',
data: {
Question_new: $('#question').val(),
Answer: $('#answer').val(),
Preparing: $('#prepare').val(),
Retries: $('#retries').val(),
},
url: '@Url.Action("WelcomeWriter", "Interwier")',
success: function (da) {
if (da.Result === "Success") {
window.location.href = da.RedirectUrl;
} else {
alert('Error' + da.Message);
}
},
error: function (da) {
alert('Error');
}
});
}
</script>
I make Partial View and AJAX call in Partial View 我在Partial View中进行Partial View和AJAX调用
Here is code for post method 这是发布方法的代码
public ActionResult CreateNewQuestion( string Question_new, string Answer, string Preparing, string Retries)
{
Question quest = new Question
{
question = Question_new,
TimeForAnswer = Answer,
TimeForReady = Preparing,
Retries = Retries,
};
db.Questions.Add(quest);
db.SaveChanges();
return Json(new { Result = "Success", Message = "Saved Successfully"});
}
I have View where on button click I need to display modal with Partial View in it. 我在按钮上单击的位置单击“查看”,我需要在其中显示具有“部分视图”的模态。 And when in modal I click #save
button it will close. 在模式下,我单击#save
按钮,它将关闭。
Here is how it looks now (it's just goes to new View) 这是现在的样子(只是进入新视图)
<div style="height: 20%;">
<button class="btn btn-default" style="margin-top: 15px; margin-left: 20px;">
@Html.ActionLink("Добавить вопрос", "Create", "Questions", null, new { @style = "color:white;" })
</button>
<button class="btn btn-default" style="margin-top: 15px; margin-left: 200px;">
@Html.ActionLink("Далее", "RoleForSending", "Questions", null, new { @style = "color:white;" })
</button>
</div>
How I can realize this? 我怎么能意识到这一点?
you can use jQuery UI/bootstrap to show your modal. 您可以使用jQuery UI / bootstrap来显示模态。
I would do this with jQuery UI: 我可以使用jQuery UI来做到这一点:
1 - Insert your partial_view in your primary view 1-在主视图中插入partial_view
<div id="containerForPartialView">
@Html.Partial("~/<pathOfYourPartial>", <yourModel>)
</div>
2 - Initialize your modal in javascript (in your primary view) 2-在javascript中初始化模态(在主视图中)
var myFormDialog = $("containerForPartialView").dialog(
{autoOpen : false, modal : true});
3 - Make your button simple 3-简化按钮
<button id="myButtonForShowDialog">Create new question</button>
4 - Attach an event on your button to show your dialog (I mean the "button" tag in your primary view): 4-在按钮上附加一个事件以显示对话框(我的意思是主视图中的“按钮”标记):
$("myButtonForShowDialog").button().on("click", function() {
myFormDialog.dialog("open");
});
For a complete jQuery UI reference look here: jQuery UI Modal dialog 有关完整的jQuery UI参考,请参见: jQuery UI模式对话框
For a reference to boostrap modal look here: Bootstrap modal 有关boostrap模态的参考,请参见此处: Bootstrap modal
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.