2017-03-07 3 views
0

Ich habe eine Erstellen Sie neue Form-Link auf meiner Schüler-Seite, um einen neuen Schüler zu erstellen, die ich als modales Popup mit Bootstrap anzeigen möchte, anstatt auf eine andere Seite zu gehen Schüler.Bootstrap Modal Popup für ActionLink nicht angezeigt

Es arbeitet derzeit als Html.ActionLink, aber ich habe Schwierigkeiten, das Formular im Körper des Popup zu zeigen. Ich möchte es später auch verwenden, um die Daten mit AJAX einzufügen, aber zuerst das modale Popup zu implementieren.

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

Aktion erstellen in 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); 
     } 

Antwort

1

Sie haben Probleme, weil Sie ein Formular in ein Modal einfügen möchten. Stattdessen haben Sie einen Aktionslink zu einer anderen Seite mit einem Formular eingefügt. Sie müssen das Formular von der Seite, die Sie nicht möchten, kopieren und in den Körper Ihres Modals einfügen. Wenn Sie das Formular hier absetzen, wird es die Aktion treffen, auf die Ihr Formular in Ihrem Controller zeigt, und die Aktion wird die Formulardaten verarbeiten und eine Ansicht zurückgeben, um die Seite zu aktualisieren. Sie sollten also Ihre Formularaktion bearbeiten, um eine Umleitung zur Indexansicht oder zur watever-Ansicht durchzuführen, die dieses Modal enthält. Wie du schon sagtest, denkst du über den Einsatz von Ajax, wahrscheinlich weil du nicht möchtest, dass die Seite aktualisiert wird. Wie auch immer, ich werde hier eine Scheinform machen, da ich nicht weiß, wie deine Form aussieht oder deine HttpPost Aktion. Ps.s. Ich tippe an einem Telefon.

Beginnen Sie einfach noch einmal.

Die submit-Eingabe sendet Ihr Formular und macht einen Beitrag zu der Aktion, die Sie in der URL angegeben haben. Dies ist im Wesentlichen die gleiche wie Schriftfelter:

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

} 

Ich weiß nicht, ob Sie eine Validierung Zusammenfassung oder eine Antifälschungstoken erforderlich. Sie müssen das Formular überprüfen, das Sie kopieren möchten.

dann Ihre Aktion würde wie folgt aussehen:

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

Antwort Edits:

Also für Sie Situation würde ich empfehlen, vergessen ein Modell zurück zum Formular erstellen zu übergeben.Der Grund, warum ein Modell zur Erstellungsseite zurückgegeben wird, ist, dass, wenn eine Person das Formular ausfüllt und es einen Fehler beim Speichern gibt, die Aktion das Objekt mit allen Feldern zurückgibt, die der Benutzer ausgefüllt hat, damit er nicht füllen muss alles wieder raus. Sie können dies in der Aktion HttpPost für das Formular sehen. Wenn Sie zum ersten Mal einen Eintrag erstellen, benötigen Sie kein Modell, da Sie ohnehin mit allen Feldern als leer beginnen. (FYI - Sie sollten die offensichtliche Notwendigkeit erkennen, ein Modell auf eine "Edit" -Seite zurückzugeben, da Sie Werte bearbeiten, die bereits in Ihrer Datenbank gespeichert wurden.) Sie haben also die Wahl - wenn Sie die Felder zurückgeben wollen, die Wenn die Sicherung fehlschlägt, müssen Sie ein Ansichtsmodell verwenden. Andernfalls können Sie einfach ein Standard-HTML-Formular erstellen und dieses an Ihre Aktion senden. Ich kann hier ein Beispiel geben.

Hier ist Ihre Form:

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

} 

Hier ist der Controller:

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

Das ist eine grobe Vorstellung. ich bin typin auf meinem Handy lol. Ich würde empfehlen, alle Validierungselemente aus Ihrem vorhandenen Formular zu kopieren und sie in Ihr neues Formular-Modal einzufügen, einschließlich der Validierungszusammenfassung, falls vorhanden. Sie können Ihr vorhandenes Formular in Chrome öffnen und mit der rechten Maustaste klicken, um die Seitenquelle anzuzeigen und dann das gerenderte HTML für das Formular von dort zu kopieren, so dass Sie keine der vorhandenen Validierungen und Eingaben verlieren. Aber behalten Sie die @ html.Beginform und den Anti-Förger-Token, wenn Sie möchten. Alynerativ verwenden Sie ein Ansichtsmodell, das jetzt nicht mehr zu tippen ist !!

+0

Danke für die Information. Ich bin sehr neu zu jQuery und AJAX und ich versuche, meinen Kopf drum herum zu bekommen. Wenn ich jQuery verwenden muss, um das modale Popup zu erstellen, wird es das Format ändern, in dem Sie es in Ihrem Post ausgegeben haben? – Truecolor

+0

Nein, solange Sie das Formular korrekt auf der Seite eingerichtet haben, ist es egal, ob Sie jquery oder den Standard-Bootstrap verwenden. Allerdings würde ich empfehlen, das Standard-Bootstrap-Modal zu verwenden, es funktioniert gut. Beachten Sie auch, dass ich die Schließen-Schaltfläche auf dem Modal bearbeitet habe, da Schaltflächen, die Sie in ein Formular eingeben, eine Übermittlung vornehmen. Also werde ich es in einen Ankerpunkt verwandeln. – Harry

+0

Wie Sie erwähnt haben, gibt es mir Probleme bei der Verwendung der Begin-Form im Modal Body Abschnitt, da ich nicht mehr als eine Modellreferenz in der Ansicht verwenden kann. Wenn ich versuche, ein normales HTML-Formular zu erstellen, habe ich Probleme beim Erstellen des Validators oder AntiForgens. – Truecolor

0

Ich empfehle Ihnen, eine Schaltfläche zu erstellen Ihre modal zu bekommen. <button type="button" class="btn btn-info btn-sm" data-toggle="modal" data-target="#myModal">Open Modal</button>, und wenn Sie wollen, dass die Schaltfläche wie eine Aktionsverknüpfung erscheint, können Sie es mit CSS tun.

1

Sie wenden die JS-Hooks und die Bootstrap-Schaltflächenklassen auf ein -Tag an, das von beiden nicht unterstützt wird. Ihr Link sollte diese stattdessen haben:

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

Danke, es zeigt jetzt das Popup-Fenster. Aber es zeigt die volle 'nav-bar' der Seite und nicht das 'X' für die Schließen-Option in der Kopfzeile, noch die 'Abbrechen'-Schaltfläche in der Fußzeile? – Truecolor

0

Wenn Sie JQuery verwenden möchten

JS modalen Popup zu öffnen

$(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> 
Verwandte Themen