asp.net mvc - How to show entered order no and selected product name and id -
i new in mvc. not figure out add in code show entered order no , selected product name , id.
here full code , dotnetfiddle url https://dotnetfiddle.net/6vn2go
model code
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 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" } }; } } } controller code
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 , redirect // 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 code
@model helloworldmvcapp.orderviewmodel @{ layout = null; } <!doctype html> <!-- template 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> please tell me code need add in view html show entered order no , selected product name , id. thanks
you set value of order number on [httppost] action method , check if it's null on view side , show/hide stuff accordingly.
another (probably better) alternative create new view , return when model state valid. order number, you'll need fetch inserted id database , pass view.
edit show code:
controller code:
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 , redirect // testing purposes configureviewmodel(model); // you'll need figure out how you're generating // order numbers // model.ordernumber = 1; // set statically poc return view(model); } private void configureviewmodel(orderviewmodel model) { ienumerable<product> products = repository.fetchproducts(); model.productlist = new selectlist(products, "id", "name"); } } } view code:
@model helloworldmvcapp.orderviewmodel @{ layout = null; } <!doctype html> <!-- template 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 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> that reuse same view, though said, i'd recommend using different view.
Comments
Post a Comment