json - 通过 Json 返回响应表单

Question

我正在用 ASP.NET MVC 制作电子商务网站，但我的 V(View) 在 React.js 中。我的数据库如下 Product(PId[PK],PName,PDescription,PImage,PPrice,PCategoryId[FK]) Category(CId[PK],CName,CDescription) 我的 StoreManager 控制器创建类如下

    //StoreManager/Create
    public ActionResult Create()
    {
        return View();
    }
    [HttpPost]
    public ActionResult Create(string myData, Product product)
    {
        var details = Newtonsoft.Json.Linq.JObject.Parse(myData);

        string PName = (string)details["PName"];
        string PDescription = (string)details["PDescription"];
        string PImage = (string)details["PImage"];   // yeah ek masla hai hai..... ka image choose kaisa karae
        double PPrice = Convert.ToDouble((string)details["PPrice"]);
        int PCategoryId = Convert.ToInt32((string)details["PCategoryId"]); // 2nd problem we need category name not category id

        Product p = new Product() { PName = PName, PDescription = PDescription, PImage = PImage, PCategoryId = PCategoryId };
        db.Products.Add(p);
        db.SaveChanges();

        return View();
    }

我有两件事有问题。1. 我的 PImage 是字符串类型。我必须将其更改为选择文件，因为将从文件中选择图像。2. 在我的表单中我不想显示类别 ID 我想在下拉列表中显示类别名称我如何实现这两个目标我的创建视图代码是

    @{
         ViewBag.Title = "Create";  
     }


     <div id="app" class="container">

     </div>

     <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
     <script src="https://code.jquery.com/jquery-2.2.0.min.js"></script>
     <script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.6/react.js"></script>
     <script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.6/react-dom.js"></script>
     <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.23/browser.min.js"></script>

     <script type="text/babel">



     class InputValues extends React.Component
     {
        constructor(props)
        {
           super(props);
           this.handleSubmit = this.handleSubmit.bind(this);
           this.ontextchange = this.ontextchange.bind(this);
           this.state = 
           {
              PName:'',
              PDescription :'',
              PImage : '',
              PPrice : '',
              PCategoryId : ''
           }
        }

        ontextchange(e)
    {
           if (e.target.id == 'PName')
           {
              this.setState({PName:e.target.value})
           }
           else if (e.target.id == 'PDescription')
           {
              this.setState({PDescription:e.target.value})
           }
           else if (e.target.id == 'PImage')
           {
              this.setState({PImage:e.target.value})
           }
           else if (e.target.id == 'PPrice')
           {
              this.setState({PPrice:e.target.value})
           }
           else (e.target.id == 'PCategoryId')
           {
              this.setState({PCategoryId:e.target.value})
           }
         }

         handleSubmit(e)
         {
            e.preventDefault();
            var data = 
            {
               'PName' : this.state.PName,
               'PDescription' : this.PDescription,
               'PImage' : this.state.PImage,
               'PPrice' : this.state.PPrice,
               'PCategoryId' : this.state.PCategoryId,
             }
             //console.log(data);
             $.ajax(
             {
                type: "POST",
                url: this.props.url,
                data: { myData: JSON.stringify(data)},
                success: function (msg)
                {
                   alert("Product Added Successfully !!!!! :)");
                }
              });
            }

            render()
            {
            return(
            <div>
            <form onSubmit={this.handleSubmit}>
              <label htmlFor="PName"> Name </label><br />
              <input id="PName" onChange={this.ontextchange} type="text" placeholder="Enter Product Name" ref={this.PName} />
              <br /><br />

              <label htmlFor="PDescription"> Description </label><br />
              <input id="PDescription" onChange={this.ontextchange} type="text" placeholder="Enter Product Description" ref={this.PDescription} />
              <br /><br />

              <label htmlFor="PImage"> Image </label><br />
              <input id="PImage" onChange={this.ontextchange} type="text" placeholder=" Enter Product Image" ref={this.PImage} />
              <br /><br />

              <label htmlFor="PPrice"> Price </label><br />
              <input id="PPrice" onChange={this.ontextchange} type="text" placeholder="Enter Product Price" ref={this.PPrice} />
              <br /><br />

              <label htmlFor="PCategoryId"> Category </label><br />
              <input id="PCategoryId" onChange={this.ontextchange} type="text" placeholder="Enter PCategoryId" ref={this.PCategoryId} />
              <br /><br />

              <p>
                <button type="submit">Submit</button>
              </p>
              </form>
              </div>
              );
              }
            }
             ReactDOM.render
            (
            <InputValues url="/StoreManager/Create" />, document.getElementById("app")
            );


           </script>

标签： jsonasp.net-mvcreactjs