如何序列化这样的形式?

时间:2015-11-09 08:03:58

标签: jquery asp.net-mvc c#-3.0

我知道有很多这样的问题,但我找不到解决方案抱歉新手...... 我有表格可以通过javascript添加和删除行

<form id="form1">
    <div class="row">
         <input name="suppliername" />
         <input name="supplierproduct" />
    <div>
     <div class="row">
         <input name="suppliername" />
         <input name="supplierproduct" />
    <div>
    <div class="row">
         <input name="suppliername" />
         <input name="supplierproduct" />
    <div>
</form>

我需要将此表单序列化为下面的对象数组

var data = [{suppliername : 'sup1', supplierproduct : 'prod1'}, {suppliername : 'sup1', supplierproduct : 'prod1'}, {suppliername : 'sup1', supplierproduct : 'prod1'}] 

我将通过jquery ajax post .....发布该数据? 服务器将使用asp mvc ..

控制器

public void createsup(List<Supplier> model)
{
    // something
}

SupplierClass

public class Supplier
{
    public string suppliername {get; set;}
    public string supplierproduct{get; set;}
}

帮助谢谢...

1 个答案:

答案 0 :(得分:0)

您可以使用<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Security-Policy" content="default-src 'self' data: gap: https://ssl.gstatic.com 'unsafe-eval'; style-src 'self' 'unsafe-inline'; media-src *"> <meta name="format-detection" content="telephone=no"> <meta name="msapplication-tap-highlight" content="no"> <meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width"> <link rel="stylesheet" type="text/css" href="css/projectindex.css"> <link rel="stylesheet" href="js/jquery.mobile-1.4.5.min.css"> <script src="js/jquery-1.11.3.min.js"></script> <script src="js/jquery.mobile-1.4.5.min.js"></script> <script src="common.js"></script> <script type="text/javascript"> function calculate(){ var bmi = bodymassindex(document.bmiform.height.value, document.bmiform.weight.value); localStorage.setItem("bmi",bmi); var loseorgain = loseorgainmessage(document.bmiform.weight.value, document.bmiform.dreamweight.value); localStorage.setItem("loseorgain",loseorgain); var weightdifference = myweightdifference(document.bmiform.weight.value, document.bmiform.dreamweight.value); localStorage.setItem("weightdifference",weightdifference); var bmrrate = bmr(document.bmiform.gender.value, document.bmiform.height.value, document.bmiform.weight.value, document.bmiform.age.value); localStorage.setItem("bmrrate",bmrrate); document.bmiform.submit(); } </script> </head> <body> <div data-role="page" id="bmicalculator"> <div data-role="header"> <a href="#" onclick="home()" class="ui-btn ui-icon-home ui-btn-icon-left">Home</a> <h1>BMI Calculator</h1> </div> <div data-role="main" class="ui-content"> Enter your height and weight. The system will calculate your BMI:<br><br> <form id="bmiform" name="bmiform" action="calculateinput.html"> <label for="height">Height</label> <input type="text" name="height" id="height" value="enter height in meters"> <label for="weight">Weight</label> <input type="text" name="weight" id="weight" value="enter weight in KG"> <fieldset data-role="controlgroup" data-type="horizontal"> <legend>Gender</legend> <label for="male">Male</label> <input type="radio" name="gender" id="male" value="male" checked> <label for="female">Female</label> <input type="radio" name="gender" id="female" value="female"> </fieldset> <label for="dreamweight">Dream Weight</label> <input type="text" name="dreamweight" id="dreamweight" value="enter dream weight in KG"> <label for="age">Age</label> <input type="text" name="age" id="age" value="enter age"> <label for="exercisefrequency">Exercise Frequency</label> <select name="exercisefrequency" id="exercisefrequency"> <option value="hardlyexercise">Hardly Exercise</option> <option value="exercise1to3timesaweek">Exercise 1 to 3 times a week</option> <option value="exercise3to5timesaweek">Exercise 3 to 5 times a week</option> <option value="exercise6to7timesaweek">Exercise 6 to 7 times a week</option> <option value="intensiveexercisemorethan7timesaweek">Intensive Exercise more than 7 times a week</option> </select><br> <input type="button" value="Calculate" onclick="calculate()"> </form> </div> <div data-role="footer" style="text-align:center;"> Developed by The Dom </div> <script type="text/javascript" src="cordova.js"></script> <script type="text/javascript" src="js/index.js"></script> </div> </body> </html>创建一个对象数组,其中包含map()input个字段中的属性和值。试试这个:

.row

Example fiddle