Question

我正在ASP.NET MVC中创建一个电子商务网站，但我的V（View）在React.js中。我的数据库如下产品（PId [P.K]，PName，PDescription，PImage，PPrice，PCategoryId [F.K]）类别（CId [P.K]，CName，CDescription）我的StoreManager Controller创建类如下

    //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>

通过Json Return反应表单

0 个答案: