在Razor中使用一个提交按钮提交两个HTML表单 [英] Submitting two HTML forms with one submit button in Razor

问题描述

首先，抱歉我的英语不好.我是ASP.NET MVC的新手，目前正在做小型的汽车租赁"项目.

First of all sorry for my bad English. I am new to ASP.NET MVC and currently I am doing small "Rent-a-car" project on it.

我想做一个表格，页面的管理员可以在页面上添加name，year of production和picture之类的详细信息.在完成一些教程之后，我制作了一个表格来创建具有名称和生产年份的汽车，并另外制作了一个表格，管理员可以在其中上传汽车的图片.

I want to make a form where administrator of the page can add Cars on page with details like name, year of production and picture. Following some tutorials I made a form to create a car with name and year of production and I made separately a form where administrator can upload a picture of the car.

现在，我有两个带有两个提交按钮的HTML表单，一个用于创建汽车，另一个用于上载汽车图像.我想将这两种形式组合成一种，管理员可以在其中键入汽车名称，生产年份，选择要上传的图片，然后用一个按钮提交所有内容.

Now I have two HTML forms with two submit buttons, one for creating a car and second for uploading an image of the car. I want to combine those two forms into one where Administrator could type name of the car, year of production, select a picture which he want's to upload and then submitting all that with one button.

我不知道该怎么做，因此请在下面查看我的代码，并告诉我必须进行哪些更改，我们将不胜感激

I have no idea how to do that so please review my code below and tell me what changes do I have to make, I will appreciate any help

这是我的汽车模型:

public class Car
{
    [Key]
    public int CarID { get; set; }
    public string Model { get; set; }
    public int YearOfProduction { get; set; }
    public string Price { get; set; }
    public string Photo { get; set; }
    public string AlternateText { get; set; }
    [NotMapped]
    public HttpPostedFileBase File { get; set; } //for image upload
}

这是我在汽车"控制器中的创建(汽车)操作"方法:

This is my Create (car) Action Method in the "Cars" controller:

[Authorize(Roles = "Administrator")]
    [HttpPost]
    [ValidateAntiForgeryToken]
    public ActionResult Create([Bind(Include = "CarID,Model,YearOfProduction")] Car car)
    {
        if (ModelState.IsValid)
        {
            db.Cars.Add(car);
            db.SaveChanges();
            return RedirectToAction("Index");
        }

        return View(car);
    }

这是我在汽车"控制器中的上传"(汽车图片)操作方法:

This is my Upload (image of the car) Action Method in the "Cars" controller:

    [HttpPost]
    public ActionResult Upload(Car picture)
    {
        if (picture.File.ContentLength > 0)
        {
                var fileName = Path.GetFileName(picture.File.FileName);
                var path = Path.Combine(Server.MapPath("~/Images/Cars"), fileName);
                picture.File.SaveAs(path);
        }

        return RedirectToAction("Index");
    }

这是我用于创建汽车的HTML表单:

This is my HTML form for creating a car:

@using (Html.BeginForm()) 
{
@Html.AntiForgeryToken()

<div class="form-horizontal">
    <h4>Car</h4>
    <hr/>
    @Html.ValidationSummary(true, "", new {@class = "text-danger"})
    <div class="form-group">
        @Html.LabelFor(model => model.Model, htmlAttributes: new {@class = "control-label col-md-2"})
        <div class="col-md-10">
            @Html.EditorFor(model => model.Model, new {htmlAttributes = new {@class = "form-control"}})
            @Html.ValidationMessageFor(model => model.Model, "", new {@class = "text-danger"})
        </div>
    </div>

    <div class="form-group">
        @Html.LabelFor(model => model.YearOfProduction, htmlAttributes: new {@class = "control-label col-md-2"})
        <div class="col-md-10">
            @Html.EditorFor(model => model.YearOfProduction, new {htmlAttributes = new {@class = "form-control"}})
            @Html.ValidationMessageFor(model => model.YearOfProduction, "", new {@class = "text-danger"})
        </div>
    </div>

    <div class="form-group">
        <div class="col-md-offset-2 col-md-10">
            <input type="submit" value="Create" class="btn btn-default"/>
        </div>
    </div>
</div>     
}

这是我用于上传汽车图片的HTML表单:

This is my HTML form for uploading an image of the car:

@using (Html.BeginForm("Upload", "Cars", FormMethod.Post, new { enctype  = "multipart/form-data" }))
{
<table>
    <tr>
        <td>File:</td>
        <td><input type="file" name="File" id="File"/></td>
    </tr>

        <tr>
            <td>&nbsp;</td>
            <td><input type="submit" name="submit" value="Upload"/></td>
        </tr>
</table>
    }

推荐答案

您可以在<input>标记中使用命令名称，如下所示:

You can use the command name in your <input> tag as shown below:

@Html.BeginForm()
{
  @Html.AntiForgeryToken()

  <!-- Your Razor code for the input form goes here  -->

  <!-- Now your Upload button -->
  <table>
    <tr>
        <td>File:</td>
        <td><input type="file" name="File" id="File"/></td>
    </tr>

        <tr>
            <td>&nbsp;</td>
            <td><input type="submit" name="commandName" value="Upload"/></td>
        </tr>
  </table>

  <!-- Finally, your form submit button -->
   <div class="form-group">
        <div class="col-md-offset-2 col-md-10">
            <input type="submit" name="commandName" value="Create" class="btn btn-default"/>
        </div>
   </div>

}

然后在控制器的action方法中将其作为参数.

And in your controllers' action method accept it as a parameter.

public ActionResult Create(Car car, string commandName)
{
    if(commandName.Equals("Create"))
    {
      // Call method to create new record...
    }
    else if (commandName.Equals("Upload"))
    {
      // Call another method to upload picture..
    }
}

如果您进行研究，还有另一种优雅的通用解决方案，您可以在Action方法上应用多按钮属性，它将自动调用控制器action.但是，在这种情况下，您需要谨慎获取值(*在此问题范围之外).您可以参考:您如何处理在ASP.NET MVC框架中有多个提交按钮?

If you research, there is another elegant generic solution, where you can just apply a multiple-button attribute on the Action method and it will automatically call the controller action. However, you need to be careful about getting values in that case ( *It's out of scope for this question). You can refer: How do you handle multiple submit buttons in ASP.NET MVC Framework?

这篇关于在Razor中使用一个提交按钮提交两个HTML表单的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！