如何显示输入的订单号和选定的产品名称和ID

时间:2015-08-30 17:07:27

标签: asp.net-mvc

我是mvc的新手。所以无法弄清楚在代码中添加什么以显示输入的订单号和所选的产品名称和ID。

这里是完整代码和dotnetfiddle url https://dotnetfiddle.net/6vn2GO

型号代码

using System;
using System.ComponentModel.DataAnnotations;
using System.Web.Mvc;
using System.Collections.Generic;

namespace HelloWorldMvcApp
{
    public class OrderViewModel
    {
        [Display(Name = "Order number")]
        public int? OrderNumber { set; get; }
        [Display(Name = "Product")]
        [Required(ErrorMessage = "Please select a product")]
        public int SelectedProductId { set; get;}
        public SelectList ProductList { get; set; }
    }

    public class Product
    {
        public int ID { set; get; }
        public string Name { set; get; }
    }

    public static class Repository
    {
        public static IEnumerable<Product> FetchProducts()
        {
            return new List<Product>()
            {
                new Product(){ ID = 1, Name = "Ketchup" },
                new Product(){ ID = 2, Name = "Mustard" },
                new Product(){ ID = 3, Name = "Relish" }
            };
        }
    }

}

控制器代码

using System;
using System.Web.Mvc;
using System.Collections.Generic;

namespace HelloWorldMvcApp
{
    public class HomeController : Controller
    {
        [HttpGet]
        public ActionResult Index()
        {
            OrderViewModel model = new OrderViewModel();
            model.OrderNumber=null;
            ConfigureViewModel(model);
            return View(model);
        }
        [HttpPost]
        public ActionResult Index(OrderViewModel model)
        {
            if (!ModelState.IsValid)
            {
                ConfigureViewModel(model);
                return View(model);
            }
            // save and redirect
            // but for testing purposes
            ConfigureViewModel(model);
            return View(model);
        }

        private void ConfigureViewModel(OrderViewModel model)
        {
            IEnumerable<Product> products = Repository.FetchProducts();
            model.ProductList = new SelectList(products, "ID", "Name");
        }
    }
}

View.cshtml代码

@model HelloWorldMvcApp.OrderViewModel
@{
    Layout = null;
}

<!DOCTYPE html>
<!-- template from http://getbootstrap.com/getting-started -->

<html lang="en">
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title>Bootstrap 101 Template</title>

        <!-- CSS Includes -->
        <link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">

        <style type="text/css">

            .field-validation-error {
                color: #ff0000;
            }

        </style>
    </head>

    <body>
        <div class="container">
            <div class="col-md-6 col-md-offset-3">
                <h1>Hello Stranger</h1>
                @using (Html.BeginForm())
                {
                    <div class="form-group">
                        @Html.LabelFor(m => m.OrderNumber)
                        @Html.TextBoxFor(m => m.OrderNumber, new {@class="form-control"}) 
                        @Html.ValidationMessageFor(m => m.OrderNumber)
                    </div>
                    <div class="form-group">
                        @Html.LabelFor(m => m.SelectedProductId)
                        @Html.DropDownListFor(m => m.SelectedProductId, Model.ProductList, "-Please select-", new {@class="form-control"}) 
                        @Html.ValidationMessageFor(m => m.SelectedProductId)
                    </div>

                    <button type="submit" class="btn btn-success submit">Save</button>
                }
            </div>
        </div>

        <!-- JS includes -->
        <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
        <script src="//netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>

        <script src="//ajax.aspnetcdn.com/ajax/jquery.validate/1.11.1/jquery.validate.min.js"></script>
        <script src="//ajax.aspnetcdn.com/ajax/mvc/4.0/jquery.validate.unobtrusive.min.js"></script>

        <script type="text/javascript">

        </script>
    </body>
</html>

请告诉我在视图html中需要添加的代码,以显示输入的订单号和所选的产品名称和ID。感谢

1 个答案:

答案 0 :(得分:0)

您可以在[HttpPost]操作方法上设置订单编号的值,并检查视图侧是否为空,并相应地显示/隐藏内容。

另一种(可能更好的)替代方案是创建一个新视图,并在模型状态有效时返回该视图。要获取订单号,您需要从数据库中提取插入的ID并将其传递给视图。

编辑以显示一些代码:

控制器代码:

using System;
using System.Web.Mvc;
using System.Collections.Generic;

namespace HelloWorldMvcApp
{
    public class HomeController : Controller
    {
        [HttpGet]
        public ActionResult Index()
        {
            OrderViewModel model = new OrderViewModel();
            model.OrderNumber=null;
            ConfigureViewModel(model);
            return View(model);
        }
        [HttpPost]
        public ActionResult Index(OrderViewModel model)
        {
            if (!ModelState.IsValid)
            {
                ConfigureViewModel(model);
                return View(model);
            }
            // save and redirect
            // but for testing purposes
            ConfigureViewModel(model);
            // you'll need to figure out how you're generating your
            // order numbers
            // 
            model.OrderNumber = 1; // just set this statically for now for POC
            return View(model);
        }

        private void ConfigureViewModel(OrderViewModel model)
        {
            IEnumerable<Product> products = Repository.FetchProducts();
            model.ProductList = new SelectList(products, "ID", "Name");
        }
    }
}

查看代码:

@model HelloWorldMvcApp.OrderViewModel
@{
    Layout = null;
}

<!DOCTYPE html>
<!-- template from http://getbootstrap.com/getting-started -->

<html lang="en">
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title>Bootstrap 101 Template</title>

        <!-- CSS Includes -->
        <link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">

        <style type="text/css">

            .field-validation-error {
                color: #ff0000;
            }

        </style>
    </head>

    <body>
        <div class="container">
         @{
          if(Model.OrderNumber == null)
          {
            <div class="col-md-6 col-md-offset-3">
                <h1>Hello Stranger</h1>
                @using (Html.BeginForm())
                {
                    <div class="form-group">
                        @Html.LabelFor(m => m.OrderNumber)
                        @Html.TextBoxFor(m => m.OrderNumber, new {@class="form-control"}) 
                        @Html.ValidationMessageFor(m => m.OrderNumber)
                    </div>
                    <div class="form-group">
                        @Html.LabelFor(m => m.SelectedProductId)
                        @Html.DropDownListFor(m => m.SelectedProductId, Model.ProductList, "-Please select-", new {@class="form-control"}) 
                        @Html.ValidationMessageFor(m => m.SelectedProductId)
                    </div>

                    <button type="submit" class="btn btn-success submit">Save</button>
                }
            </div>
            } else {
            <div>show your confirmation stuff here</div>
            }
         }

        </div>

        <!-- JS includes -->
        <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
        <script src="//netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>

        <script src="//ajax.aspnetcdn.com/ajax/jquery.validate/1.11.1/jquery.validate.min.js"></script>
        <script src="//ajax.aspnetcdn.com/ajax/mvc/4.0/jquery.validate.unobtrusive.min.js"></script>

        <script type="text/javascript">

        </script>
    </body>
</html>

将重复使用相同的视图,但正如我所说,我建议使用不同的视图。