使用Jquery asp.net mvc 4发布和接收数据

时间:2012-03-26 08:26:51

标签: jquery asp.net-mvc

我已经查看了多篇文章试图解释这一点,但其中大多数只是发布文本的基本示例等等。我现在可以使用Ajax.BeginForm或Jquery发布。我不是一个非常熟练的JavaScript开发人员。但也许有人想过要用什么。好的,代码。

我创建了一个包含我需要的数据的ViewModel

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

我的详细信息来了:

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

这是我的控制器

     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();

所以我想做的事情是&#34; AvviksNotat&#34;在底部。我想在详细信息表单的底部创建一个文本框,我可以输入新的评论,将其发布到服务器,并将新结果返回到&#34; AvviksNotat&#34;列表顶部。 。使用动画也很酷。

1 个答案:

答案 0 :(得分:0)

我找到了解决方案,有点像。

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