Question

所以这是代码，当我按下“开始”时，我有2个提交按钮我希望它将Datetime.now发送到开始行，当我按“停止”时，我希望它发送停止日期时间。现在到列，这应该发生在同一行。当我再次按Start时，它应生成一个新的ID 2，等等。在第二行打印开始日期。

Exampel ID 1：Start 2013-11-15 05:12 Slut：2013-11-15 05:15

问候Patrik

    @using (Html.BeginForm())
    {
        @Html.AntiForgeryToken()
        @Html.ValidationSummary(true)
        <div class="editor-label">
            @Html.LabelFor(model => model.Start)
        </div>
        <div class="editor-field">
            @Html.TextBoxFor(model => model.Start, new { style = "display: none;", @Value = @DateTime.Now })
            @Html.ValidationMessageFor(model => model.Start)
        </div>
         <p>
            <input type="submit" name="@Html.NameFor(x => x.Command)" value="Start" formaction="/tider/create" />
        </p>

    }
    @using (Html.BeginForm())
    {
        @Html.AntiForgeryToken()
        @Html.ValidationSummary(true)
        <div class="editor-label">
            @Html.LabelFor(model => model.Slut)
        </div>
        <div class="editor-field">
            @Html.TextBoxFor(model => model.Slut, new { @Value = @DateTime.Now })
            @Html.ValidationMessageFor(model => model.Slut)
        </div>
        <p>
            <input type="submit" name="@Html.NameFor(x => x.Command)"  value="Stop" />
        </p>
    }
</fieldset>

            <div class="editor-label">
                @Html.LabelFor(model => model.Slut)
            </div>
            <div class="editor-field">
                @Html.TextBoxFor(model => model.Slut, new { @Value = @DateTime.Now })
                @Html.ValidationMessageFor(model => model.Slut)
            </div>

            <p>
                <input type="submit" value="Create" />
            </p>
        </fieldset>
    }

控制器 { 公共类TiderController：Controller { private TiderDBContext db = new TiderDBContext（）;

        //
        // GET: /Tider/

        public ActionResult Index()
        {
            return View(db.Tider.ToList());
        }

        //
        // GET: /Tider/Details/5

        public ActionResult Details(int id = 0)
        {
            ArbetsTider arbetstider = db.Tider.Find(id);
            if (arbetstider == null)
            {
                return HttpNotFound();
            }
            return View(arbetstider);
        }

        //
        // GET: /Tider/Create

        public ActionResult Create()
        {
            return View();
        }

        //
        // POST: /Tider/Create

        [HttpPost]
        [ValidateAntiForgeryToken]
        public ActionResult Create(ArbetsTider arbetstider)
        {
            if (ModelState.IsValid)
            {
                db.Tider.Add(arbetstider);
                db.SaveChanges();

            }

            return View(arbetstider);
        }

        //
        // GET: /Tider/Edit/5

        public ActionResult Edit(int id = 0)
        {
            ArbetsTider arbetstider = db.Tider.Find(id);
            if (arbetstider == null)
            {
                return HttpNotFound();
            }
            return View(arbetstider);
        }

        //
        // POST: /Tider/Edit/5

        [HttpPost]
        [ValidateAntiForgeryToken]
        public ActionResult Edit(ArbetsTider arbetstider)
        {
            if (ModelState.IsValid)
            {
                db.Entry(arbetstider).State = EntityState.Modified;

               return RedirectToAction("Index");
            }
            return View(arbetstider);
        }

        //
        // GET: /Tider/Delete/5

        public ActionResult Delete(int id = 0)
        {
            ArbetsTider arbetstider = db.Tider.Find(id);
            if (arbetstider == null)
            {
                return HttpNotFound();
            }
            return View(arbetstider);
        }

        //
        // POST: /Tider/Delete/5

        [HttpPost, ActionName("Delete")]
        [ValidateAntiForgeryToken]
        public ActionResult DeleteConfirmed(int id)
        {
            ArbetsTider arbetstider = db.Tider.Find(id);
            db.Tider.Remove(arbetstider);
            db.SaveChanges();
           return RedirectToAction("Index");
        }

        protected override void Dispose(bool disposing)
        {
            db.Dispose();
            base.Dispose(disposing);
        }

        [HttpPost]
        public ActionResult Start(ArbetsTider model)
        {
            using (var context = new TiderDBContext())
            {
                context.Tider.FirstOrDefault(x => x.ID == model.ID).Start = model.Start;
                context.SaveChanges();
            }
            return View("Index");
        }

        [HttpPost]
        public ActionResult Stop(ArbetsTider model)
        {
            using (var context = new TiderDBContext())
            {
                context.Tider.FirstOrDefault(x => x.ID == model.ID).Slut = model.Slut;
                context.SaveChanges();
            }
            return View("Index");
        }
    }
}

模型

public class ArbetsTider
{
    public int ID { get; set; }
    public DateTime Start { get; set; }
    public DateTime Slut { get; set; }

}

public class TiderDBContext : DbContext
{
    public DbSet<ArbetsTider> Tider { get; set; }
}

Answer 1

您需要使用Ajax方法部分提交一个表单而不刷新整个页面。

尝试这样的事情：

首先像这样更改（删除type ='submit'）：

@using (Html.BeginForm("Create", "Tider", FormMethod.Post, new { @id= "formStart" } ))
    {
// html code
    <input id="submittStartDate" name="@Html.NameFor(x => x.Command)" value="Start" class="submitButton" />
});

并且

@using (Html.BeginForm("Stop", "Tider", FormMethod.Post, new { @id= "formStop" } ))
{
//html 
    <input id="stop" name="@Html.NameFor(x => x.Command)"  value="Stop" class="submitButton" />
//html 
});

然后在javascript文件中添加一个函数：

$(document).ready(function () {
   $("input.submitButton").click(function() {
      SubmitForm(this);
   });
});

function SubmitForm(input) {
   var url = "";
   var formData = "";

   if(input[0].id == "formStart")
   {
      url = "../Tider/Create";
      data = $('form#formStart').serialize();
   }
   else if(input[0].id == "formStop") {
      url = "../Tider/Stop";
      data = $('form#formStop').serialize();
   }

   $.ajax({
       type: "POST",
       url: url,
       data: data,
       success: function (result) {
          // Do your stuff here
       },
       error: function () {
         alert("Error in saving");
       }
    });
}

你需要将C＃方法的返回类型更改为Create和Stop to required type（我认为你需要int）并重新调整。您将获得Ajax调用的数据“成功”功能。

MvC multiple提交不同列的同一行

1 个答案: