2017-03-07 75 views
0

我有一个在我的学生页面创建新的 form-link创建一个新的学生,我想使用引导程序显示为模态弹出窗口,而不是转到另一个页面并创建学生。用于ActionLink的自举模式弹出窗口不显示

它目前是作为一个Html.ActionLink工作,但我很难在弹出窗体中显示窗体。我后来也想用它来用AJAX插入数据,但是想先实现模态弹出。

<script src="~/Scripts/jquery-3.1.1.js"></script> 
<link href="~/Content/bootstrap.css" rel="stylesheet" /> 
<script src="~/Scripts/bootstrap.js"></script> 
<link href="~/Content/PagedList.css" rel="stylesheet" type="text/css" /> 

@if (User.IsInRole("Admin")) 
{ 
    <p class="btn btn-primary" data-toggle="modal" data-target="#myModal"> 

     @Html.ActionLink("Create New", "Create", null, new { @id = "create" }) 

     <div class="modal fade" id="myModal"> 
      <div class="modal-dialog"> 
       <div class="modal-content"> 

        <div class="modal-header"> 
         <a href="#" class="close" data-dismiss="modal">&times;</a> 
         <h3 class="modal-title">Create Modal</h3> 
        </div> 

        <div class="modal-body"> 
         @Html.ActionLink("Create New", "Create", null, new { @id = "create" }) 

        </div> 

        <div class="modal-footer"> 
         <a href="#" class="btn btn-default" data-dismiss="modal">Cancel</a> 
         <a href="#" class="btn btn-success" >Create</a> 

        </div> 
       </div> 
      </div> 
     </div> 
    </p> 

在StudentController

[Authorize(Roles = "Admin")] 
     [HttpPost] 
     [ValidateAntiForgeryToken] 
     public ActionResult Create([Bind(Include = "ID,LastName, FirstMidName, EnrollmentDate, PaymentDue")] 
      Student student) 
     { 
      try 
      { 
       if (ModelState.IsValid) 
       { 
        studentRepository.InsertStudent(student); 
        studentRepository.Save(); 
        return RedirectToAction("Index"); 
       } 
      } 
      catch (DataException /* dex */) 
      { 
       //Log the error (uncomment dex variable name after DataException and add a line here to write a log. 
       ModelState.AddModelError(string.Empty, "Unable to save changes. Try again, and if the problem persists contact your system administrator."); 
      } 
      return View(student); 
     } 

回答

1

您遇到了麻烦,因为您希望将表单放入模式中,而您已将一个操作链接放到另一个具有表单的页面上。您必须从不需要的页面复制表格并将其粘贴到模态的主体中。那么当你在这里提交表单时,它会触发你的表单在你的控制器中指向的动作,这个动作将处理表单数据并返回一个视图,也就是刷新页面。所以你应该编辑你的表单动作来重定向到索引视图或watever视图,它有这个模式。正如你所说你正在考虑使用Ajax,可能是因为你不想刷新页面。无论如何,我会在这里制作一个模拟表单,因为我不知道你的表单看起来像什么或者你的HttpPost动作。附:我正在打电话。

重新开始。

// here is a button which will open up the modal. forget about using an actionlink to do this. 
    <button type="button" class="btn btn-info btn-lg" data-toggle="modal" data- target="#myModal">Create New</button> 

    //here is a functioning modal 
    <div id="myModal" class="modal fade" role="dialog"> 
    <div class="modal-dialog"> 

     <!-- Modal content--> 
     <div class="modal-content"> 
     <div class="modal-header"> 
     <button type="button" class="close" data-dismiss="modal">&times;</button> 
      <h4 class="modal-title">Create Something</h4> 
     </div> 
     //wrap your modal-body and your modal- footer in a form. You can copy the begin form from your other page. You may have problems here because if this is a scaffolded crud that form most likely uses another model(not modal) which you return to it from an action. What you can do is make an html form and name your inputs correctly and post it to your action. 

     <form action="/ControllerName/ActionName" method="post"> 
     <div class="modal-body"> 
      First name: <input type="text" name="fname">  <br> 
      Last name: <input type="text" name="lname"><br>   
     </div> 
     <div class="modal-footer"> 
      <a class="btn btn-default" data-dismiss="modal">Close</a> 

     <input type="submit" class="btn btn-success pull-right" value="Save">   
    </div> 
    </form> 
    </div> 
    </div> 
    </div> 

提交输入将提交您的表单并对您在url中指定的操作进行发布。这实际上与书写相同:

@using (Html.BeginForm("ActionName", "ControllerName", FormMethod.Post, 
            new { enctype = "multipart/form-data" })) 
    { 

     <div class="modal-body"> 
     First name: <input type="text" name="fname">  <br> 
     Last name: <input type="text" name="lname"><br>   
     </div> 
     <div class="modal-footer"> 
     <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> 

    <input type="submit" class="btn btn-success pull-right" value="Save">  
    </div> 

} 

我不知道您是否需要验证摘要或反伪造令牌。你必须检查你想复制的表格。

那么你的行动将是这个样子:

public class ControllerName : Controller 
{ 
    public ActionResult Index() 
    { 
     // Add action logic here 
     return View(); 
    } 

    [HttpPost] 
    public ActionResult ActionName(string fname, string lname) 
    { 
     // do something with fname and lname. Thenaming of your html inputs and the parameters you recieve here are important. If the post action has a required parameter that you do not post it will give you a 404 or something. 

     //redirec to whatever page has the modal on 
     return View("Index") 
    }  
} 

答案编辑:

所以对于你的情况,我建议忘记回传一种模式的创建形式。它将模型返回到创建页面的原因是,如果某人填写了表单并且保存时出错,则该操作将返回该对象与用户填写的所有字段,以便他不必填写再次出来。你可以在表单的HttpPost动作中看到这一点。当你最初创建一个条目时,你不需要一个模型,但是因为你始终将所有的字段都设为空。 (仅供参考 - 您应该意识到显然需要将模型返回到“编辑”页面,因为您正在编辑已经保存在数据库中的值..)所以这是您的选择 - 如果您想返回字段已经填写回页面如果保存失败,你将不得不使用视图模型。否则,你可以制作一个标准的HTML表单,并发布到你的行动。我可以在这里做一个例子。

这是您的形式:

@using (Html.BeginForm("Create", "ControllerName", FormMethod.Post, 
            new { enctype = "multipart/form-data" })) 
    { 
    @Html.AntiForgeryToken() 
     <div class="modal-body"> 
     First name: <input type="text" name="FirstMidName">  <br> 
     Last name: <input type="text" name="lname"><br>   
     //do you need a date picker here???? 
     Enrollment Date: <input type="text" name="EnrollmentDate"><br> 

     Payment Due: <input type="text" name="PaymentDue"><br> 

     </div> 
     <div class="modal-footer"> 
     <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> 

    <input type="submit" class="btn btn-success pull-right" value="Save">  
    </div> 

} 

这里是你的控制器:

[Authorize(Roles = "Admin")] 
    [ValidateAntiForgeryToken] 
    [HttpPost] 

    public ActionResult Create(string LastName, string FirstMidName, string EnrollmentDate, string PaymentDue) 
    { 

     // If you do not have validation on the front end you at tge very least need to put some null checks here based on you required fields. I remover the model state check as we are not passing through a model anymore. So: 
     if (FirstMidName != ""){ 
     try 
     { 
      Student student = new Student(); 
      student.LastName = LastName; 
      student.FirstMidName = FirstMidName; 

      //you need to handle how this date is parsed here 
      student.EnrollmentDate =DateTime.Parse(EnrollmentDate); 

      //if this is a bool you may need to do some logic here depending on what values your form gives you. Maybe if (PaymentDue == "checked"){student.PaymentDue = true} else { student.PaymentDue = false} 
      //if payment due is monetry value you must be very catefull about the way you parse decimals/floats with the decimal point and culturr information. You will need to do some research here. 
    student.PaymentDue = PaymentDue; 

       studentRepository.InsertStudent(student); 
       studentRepository.Save(); 
       return RedirectToAction("Index"); 
      } 
     } 
     catch (DataException /* dex */) 
     { 
      //Log the error (uncomment dex variable name after DataException and add a line here to write a log. 
      ModelState.AddModelError(string.Empty, "Unable to save changes. Try again, and if the problem persists contact your system administrator."); 
     } 
     } 
     //see i removed the old return view with a model here which was incase there was a problem saving. 
     return RedirectToAction("Index") ; 
    } 

那是一个粗略的想法。即时typin在我的手机哈哈。我建议复制现有创建表单中的所有验证元素,并将其粘贴到新的表单模式中,如果存在验证摘要(包括验证摘要)。您可以在Chrome中打开现有表单并右键单击以查看页面源,然后从表单中复制呈现的表单的HTML,以便您不会丢失任何现有的验证和输入。但如果你喜欢,请保留@ html.Beginform和antiforgerytoken。 Alyernatively你shoild使用视图模型,我不敢打字现在!

+0

感谢您的信息。我对jQuery和AJAX非常陌生,我正试图让自己的头脑清楚。如果我需要使用jQuery来创建模式弹出窗口,它是否会改变你在帖子中的布局格式? – Truecolor

+0

不,只要您在页面上正确设置了表单,如果您使用jquery或默认引导,则无关紧要。但是我会建议使用默认引导模式,它工作正常。另请注意,我编辑了模式上的关闭按钮,因为您放入表单中的按钮将进行提交。所以我会把它改成一个锚点。 – Harry

+0

正如你所提到的那样,它使我在使用模态体部分的开始表单时遇到问题,因为我无法在视图中使用多个模型引用。当我尝试创建一个正常的html表单时,我无法创建验证器或AntiForgery。 – Truecolor

0

创建操作,我建议你创建一个按钮,让您的模式。 <button type="button" class="btn btn-info btn-sm" data-toggle="modal" data-target="#myModal">Open Modal</button>,如果你想让按钮看起来像一个动作链接,你可以通过CSS来完成。

1

您正在将JS钩子和引导按钮类应用到p标记,这也不受任何两个标记支持。你的链接应该有这些来代替:

@Html.ActionLink("Create New", "Create", null, new { id = "create", @class = "btn btn-primary", data_toggle = "modal", data_target = "#myModal" }) 
+0

谢谢,现在显示弹出框。但它显示的是网站的完整'nav-bar',并且不在头部显示关闭选项的'X',也没有在页脚中显示'取消'按钮? – Truecolor

0

如果你想使用jQuery的打开模式弹出

JS

$(function() { 
      $('#create').on('click', function (e) { 
       e.preventDefault(); 
       $('#myModal').modal('show'); 
      }); 
     }); 

HTML

<body> 
    @Html.ActionLink("Create New", "Create", null, new { @id = "create" }) 

    <div class="modal fade" id="myModal"> 
     <div class="modal-dialog"> 
      <div class="modal-content"> 

       <div class="modal-header"> 
        <a href="#" class="close" data-dismiss="modal">&times;</a> 
        <h3 class="modal-title">Create Modal</h3> 
       </div> 

       <div class="modal-body"> 

       </div> 

       <div class="modal-footer"> 
        <a href="#" class="btn btn-default" data-dismiss="modal">Cancel</a> 
        <a href="#" class="btn btn-success">Create</a> 

       </div> 
      </div> 
     </div> 
    </div> 
</body>