Question

我有查看我显示电子邮件列表的位置

我需要使用模态窗口和部分视图在表格中创建新记录。

以下是部分视图的代码

    @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>

我在Partial View中进行部分视图和AJAX调用

以下是post方法的代码

  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"});

    }

我有查看按钮单击的位置我需要在其中显示带有部分视图的模态。在模态中，我点击#save按钮它将关闭。

以下是它现在的样子（它只是转到新视图）

 <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>

我怎么能意识到这一点？

Answer 1

你可以使用jQuery UI / bootstrap来显示你的模态。

我会用jQuery UI做到这一点：

1 - 在主视图中插入partial_view

function hideOnScroll() {
  $(window).scroll(function() {
    if ( $(document).scrollTop() > 1) {        
     if( $('.menubox').offset().left == 0 ){
        $('.menubox').css('left', '-25%');          
      }   
   });
 }

2 - 在javascript中初始化你的模态（在你的主视图中）

<div id="containerForPartialView">
    @Html.Partial("~/<pathOfYourPartial>", <yourModel>)
</div>

3 - 简化按钮

var myFormDialog = $("containerForPartialView").dialog(
   {autoOpen : false, modal : true});

4 - 在您的按钮上附加一个事件以显示您的对话框（我的意思是主视图中的“按钮”标记）：

<button id="myButtonForShowDialog">Create new question</button>

有关完整的jQuery UI参考，请查看此处：jQuery UI Modal dialog
有关boostrap模态的参考，请查看此处：Bootstrap modal

从部分视图（ASP.NET MVC）创建模态窗口

1 个答案: