<table class="table">

    <tr>

        <th>@Html.DisplayNameFor(model=>model.Id)</th>

        <th>

            @Html.DisplayNameFor(model => model.Pid)

        </th>

        <th>

            @Html.DisplayNameFor(model => model.Name)

        </th>

        <th>

            @Html.DisplayNameFor(model => model.Remark)

        </th>

        <th></th>

    </tr>

@foreach (var item in Model) {

    <tr>

        <td>@item.Id</td>

        <td>

            @Html.DisplayFor(modelItem => item.Pid)

        </td>

        <td>

            @Html.DisplayFor(modelItem => item.Name)

        </td>

        <td>

            @Html.DisplayFor(modelItem => item.Remark)

        </td>

        <td>

           <a  href="javascript:void(0)" onclick="editDream(this)">edit</a> |<a href="javascript:void(0)" onclick="delDream(this)" >del</a>

        </td>

    </tr>

}

    <tr>

        <td></td>

        <td><select id="cate" class="form-control"><option value="">no select</option></select></td>

        <td><input class="form-control" type="text" name="Name" /></td>

        <td><input class="form-control" type="text" name="Reamrk" /></td>

        <td><a href="javascript:void(0)" onclick="addDream(this)">add</a></td>

    </tr>

</table>

<script type="text/javascript">

    getCate();

    function getCate() {

        $.ajax({

            url: "/comm/dreamcomm.ashx",

            data:"action=getcate",

            dataType:"json",

            type: "post",

            success: function (data) {

                var msg = "";

                for (var i = , len = data.length; i < len; i++) {

                    msg += "<option value='" + data[i].Id + "'>" + data[i].Name + "</option>";

                }

                $("#cate").append(msg);

            }

        })

    }

    function editDream(thisObj) {

    }

    function delDream(thisObj) {

        var $td = $(thisObj).parents("tr").children("td");

        var id = $td.eq().text();

        var data = "action=deldream&id=" + id;

        dreamAjax(data);

    }

    function addDream(thisObj) {

        var $td = $(thisObj).parents("tr").children("td");

        var pid = $td.eq().find("select").val();

        var name = $td.eq().find("input").val();

        var remark = $td.eq().find("input").val();

        var data = "action=adddream&pid=" + pid + "&name=" + name + "&remark=" + remark;

       dreamAjax(data);

    }

    function dreamAjax(_data, _url) {

        $.ajax({

            url:"/comm/dreamcomm.ashx",

            data: _data,

            type: "post",

            success: function (data) {

                if (data == ) {

                    alert("open is ok ");

                    location.reload();

                } else {

                    alert("open is error:" + data);

                }

            }

        })

    }

</script>