Post und Empfangen von Daten mit Jquery asp.net mvc 4

Question

Ich habe durch mehrere Beiträge, die versuchen, dies zu erklären, aber die meisten von ihnen sind nur grundlegende Beispiele Buchung Text und so weiter. Ich jetzt, dass es möglich ist, Ajax.BeginForm oder Jquery zum Posten zu verwenden. Ich bin kein sehr fähiger Javascript-Entwickler. Aber vielleicht hat sich jemand Gedanken gemacht, was zu benutzen ist. Ok, zum Code.

Ich habe ein Ansichtsmodell wich erstellt hält die Daten, die ich

brauchen

public class AvviksModel 
{ 
    public Avvik Avvik { get; set; } 
    public List<AvviksNotat> Notater { get; set; } 
    public DateTime AvvikRegistrertTid { get; set; } 
    //public List<AnsattModel> Ansatte { get; set; } 
    public String NewNote { get; set; } 
    public int RegistrertAvAnsNummer { get; set; }   
} 

Hier kommt meine detailals Ansicht:

@model EL4.Administrasjon.Models.AvviksModel 
<link rel="stylesheet" type="text/css" href="../../Content/Form.css" /> 
@{ 
ViewBag.Title = "Details"; 
} 

<h2>@Model.Avvik.Subject</h2> 

<div id="contact-area"> 

    <label for="TidRegistrert">Tid registrert</label> 
<input type="text" name="TidRegistrert" id="TidRegistrert" value="@Model.Avvik.RegistrertTid" readonly="true" /> 

<label for="ansnr">Avviks ID</label> 
<input type="text" name="AvviksID" id="AvviksID" value="@Model.Avvik.AvviksID" readonly="true" /> 

<label for="ansnr">Kategori</label> 
<input type="text" name="cat" id="cat" value="@Model.Avvik.AvviksKategori.Navn" readonly="true" /> 

<label for="GjelderAns">Gjelder ansatt</label> 
<input type="text" name="gjelderAns" id="gjelderAns" value="@Model.Avvik.GjelderAnsattNr" readonly="true" /> 

<label for="RegistrertAvAns">Registrert av</label> 
<input type="text" name="RegistrertAvAns" id="RegistrertAvAns" value="@Model.Avvik.RegistrertAvIDAnsNr" readonly="true" />     
</div>  
@foreach (var item in Model.Avvik.AvviksNotat) { 
<div class="gradientBoxesWithOuterShadows"> 
    <h3>@item.SkrevetAv</h3>  
    @item.SkrevetDato<br /> 

     <p>@item.Note</p> 
    </div>  
}   

Hier sind meine Controller

 public ActionResult Details(int? id) 
    { 
     if (id != null) 
     { 
      AvviksModel model = new AvviksModel(); 
      HM_000_EL4Entities entHm = new HM_000_EL4Entities(); 

      Avvik TheAvvik = ent.Avvik.Where(a => a.AvviksID == id).FirstOrDefault(); 

      if (TheAvvik != null) 
      {      
       model.Avvik = TheAvvik; 
       return View(model); 
      } 
     } 

     return View(); 

Also das, was ich würde gerne tun, ist die Liste von "AvviksNotat" am unteren Rand. Ich möchte am unteren Rand des Detailformulars ein Textfeld erstellen, in das ich einen neuen Kommentar eingeben, diesen auf dem Server veröffentlichen und das neue Ergebnis ganz oben in der Liste "AvviksNotat" angeben kann. Wäre auch cool mit einer Animation.

Answer 1

Ich fand eine Lösung auf diese Art von.

@using (Ajax.BeginForm("AddNotat", "Avvik", new AjaxOptions 
{ 
HttpMethod = "GET", 
InsertionMode = InsertionMode.InsertBefore, 
UpdateTargetId = "notes", 
OnSuccess ="AfterInsert" 
})) 
{ 
<h3>Legg til kommentar</h3> 
<label for="note">Notat</label>  
<textarea name="notatText" id="notatText" rows="10" cols="30"></textarea> 

<label for="ans">Registert av</label> 
<input type="text" name="ans" value="@Model.Avvik.RegistrertAvIDAnsNr" /> 
<input type="submit" value="Legg til" id="TheAddNoteButton"/> 
@Html.Hidden("id",Model.Avvik.AvviksID) 
}