Sign up form with Display Pic

See more:

.NET

HTML

I have design a "Add Product" form for admin where he can add his product information and upload item picture. The form is similar to sign up thats why the subject of question is like this. I have included both server and client side validations.
The problem I'm getting is that to upload image I have added another form in the main form and it works only this way but I get "required field" errors in other field. Also the image path is not saved in the database.
This is my code. Any help would be appreciated. Thanks

<table cellpadding='2' cellspacing='0' border='0' id='ap_table'>
    <tr>
        <td ><table cellpadding='0' cellspacing='0' border='0' width='100%'><tr><td>Enter product information</th>
    </tr>
    <tr>
        <td><br>
            <form method="post" action="" name="prod" id="prod" target="_top">
                @Html.ValidationSummary()
                <input type="hidden" name="action" value="login">
                <input type="hidden" name="hide" value="">
                <center>
                    <table>
                        <tr><td>Product Name:</td><td><input type="text" name="pname" id="pname" value="@Request["pname"]" /></td>
                            <td>
                                <div style="height: auto">
                                    @Html.ValidationMessage("pname")
                                </div>
                            </td>
                        </tr>
                        <tr><td>Description:</td><td><textarea rows="10" cols="25" name="desc" id="desc"></textarea> </td>
                            <td>
                                <div style="height: auto">
                                    @Html.ValidationMessage("desc")
                                </div>
                            </td>
                        </tr>                        
                        <tr><td>Price:</td><td><input type="text" name="price" id="price" value="@Request["price"]"></td>
                            <td>
                                <div>
                                    @Html.ValidationMessage("price")
                                </div>
                            </td>
                        </tr>
                        <tr><td>Brand:</td><td><input type="text" name="brand" id="brand" value="@Request["brand"]"></td>
                            <td>
                                <div style="height: auto">
                                    @Html.ValidationMessage("brand")
                                </div>
                            </td>
                        </tr>
                        <tr><td>Category:</td>
                            <td>
                                <select id="cat" name="cat">
                                    <option></option>
                                    @foreach(var item in cats){
                                        <option>@item.Title</option>
                                    }
                                </select>                            
                            </td>                            
                        </tr>                        
                        <tr><td> </td><td><input type="submit" value="Save"></td></tr>
                        <tr><td colspan=2> </td></tr>
                    </table>
                    </form>
                </td>
        <td>
            <form action="" method="post" enctype="multipart/form-data">
                <fieldset>
                    <legend> Add Image </legend>
                    <label for="Image">Image</label>
                    <input type="file" name="Image" />
                    <br/>
                    <input type="submit" value="Upload" />
                </fieldset>
            </form>
            <!--<h1>Uploaded Image</h1>-->
                @if(imagePath != ""){
                <div class="result">
                    <img alt="Image not available" src="@imagePath">

                </div>
                }
        </td>
            </tr>
        </table>
        </td>
    </tr>
</table>
</center>

<script type="text/javascript">
   
    $("#prod").validate({
    rules: {
        pname: {
            required: true
        },
        desc: {
            required: true
        },
        price: {
            required: true
        },
        brand: {
            required: true
        }
    },
    messages: {
        pname: {
            required: "Please provide a product name"
        },
        desc: {
            required: "Please provide product description"
        },
        price: {
            required: "Please enter price"            
        },
        brand: {
            required: "Please provide brand for product"            
        }
    }
});

</script>

and this is server side code:


Layout = "~/Layouts/_Layout.cshtml";
PageData["title"] = "Add Product";

//getting categories
var db = Database.Open("myDB");
var cq = "select Title from Categories";
var cats = db.Query(cq);


WebImage photo = null;
var newFileName = "";

var name = "";
var desc = "";
var price = "";
var brand = "";
var cat = "";
var imagePath = "";

// Validation

Validation.RequireField("pname", "please enter product name");
Validation.RequireField("desc", "please provide product description");
Validation.RequireField("price", "please enter product price");
Validation.RequireField("brand", "please provide brand name");

if(IsPost){
// image upload code
photo = WebImage.GetImageFromRequest();

<p>@photo</p>

if(photo != null){
newFileName = Path.GetFileName(photo.FileName);
photo.Resize(100, 100);

imagePath = @"images\" + newFileName;

//photo.Save(@"~\" + imagePath);
photo.Save(imagePath);
}
if(Validation.IsValid())
{
name = Request["pname"];
desc = Request["desc"];
price = Request["price"];
brand = Request["brand"];
cat = Request["cat"];

var q = "insert into Products(Name, Description, Price, Brand, Category, ImagePath) values(@0, @1, @2, @3, @4, @5)";
//db.Query(q, name, desc, price, brand, cat, imagePath);

if(db.Execute(q, name, desc, price, brand, cat, imagePath) > 0)
{

<p>Product added successfully</p>

}
else
{

<p>There was an error while adding the product</p>

}
}
}
}