MVC Jquery傳checkbox已勾選的物件陣列回control

首先在View中加入webgrid並且放入checkbox

<div id="gridContent">
@grid.GetHtml(
columns: grid.Columns(
grid.Column("id", "id", format: @<input class="select" id="assignChkBx" name="assignChkBx" type="checkbox" value="@item.id"/>),
grid.Column("item", "item"),
grid.Column("name", "改字", style: "description")
)) 
</div>

Jquery的寫法如下

$("#Button2").click(function () {
            var str=[];
            $("input:[name='assignChkBx'][checked]").each(function () {      
                str.push($(this).val());
            });
            $.post("@Url.Content("~/store/bgg")",
                   
                    {user:JSON.stringify(str)  },
                    function (res) {
                        alert(res);
                    });
        });

接著回到controll
由於物件陣列的回傳會因為jquery的處理而接收不到
因此必須在controll底下加入一個處理方法

 /// <summary>
    /// FromJsonAttribute
    /// 用在透過javascript 傳送json格式資料到controller時使用
    /// </summary>
    public class FromJsonAttribute : CustomModelBinderAttribute
    {
        /// <summary>
        /// JavaScriptSerializer
        /// </summary>
        private readonly static JavaScriptSerializer serializer = new JavaScriptSerializer();

        /// <summary>
        /// GetBinder
        /// </summary>
        /// <returns>Binder</returns>
        public override IModelBinder GetBinder()
        {
            return new JsonModelBinder();
        }

        /// <summary>
        /// JsonModelBinder
        /// </summary>
        private class JsonModelBinder : IModelBinder
        {
            /// <summary>
            /// BindModel
            /// </summary>
            ///<param name="controllerContext">controllerContext
            ///<param name="bindingContext">bindingContext
            /// <returns>object</returns>
            public object BindModel(ControllerContext controllerContext, ModelBindingContext bindingContext)
            {
                var stringified = controllerContext.HttpContext.Request[bindingContext.ModelName];
                if (string.IsNullOrEmpty(stringified))
                {
                    return null;
                }

                return serializer.Deserialize(stringified, bindingContext.ModelType);
            }
        }
    }

然後接著是controll的部分

string tt;
        public ActionResult bgg([FromJson]List<int> user)
        {
            
            
            if (user != null)
            {
                foreach(var item in user){
                    tt += item.ToString();
                }
            }
                return Content(tt);
            
        }

如此一來就能將被勾選的Value正確傳給controll~!

Jquery AJAX


$(document).ready(function() {

//用$_POST["name"]接值
$("a.yy").click(function(){
$.post('hello.php',{name: 'kkpp88p'},
function(txt){$('div.msg').html(txt);}); });

$.ajax({ //用$_GET["hh"]接值 可加入type: 'post', 改成用POST
url: 'hello.php',
data: {hh: '456789'},
error: function() { alert('error!'); },
success: function(response) { $('div.msg').html(response) }
});

});


動態時間 time

        var timerID = null;
        var timerRunning = false;
        function stopclock() {
            if (timerRunning)
                clearTimeout(timerID);
            timerRunning = false;
        }
        function startclock() {
            stopclock();
            showtime();
        }
        function showtime() {
            var now = new Date();
            var hours = now.getHours();
            var minutes = now.getMinutes();
            var seconds = now.getSeconds();
            var dateValue = now.getYear() + 1900 + "年" + (now.getMonth() + 1) + "月" + now.getDate() + "日";
            var timeValue =  ((hours >= 12) ? " 下午 " : " 上午 ");
            timeValue += ((hours > 12) ? hours - 12 : hours);
            timeValue += ((minutes < 10) ? ":0" : ":") + minutes;
            timeValue += ((seconds < 10) ? ":0" : ":") + seconds;
            $('#time').html(timeValue);
            timerID = setTimeout("showtime()", 1000);
            timerRunning = true;
        }
        $().ready(function () {
            startclock();
        });

jquery

<head runat="server">
    <title></title>
    <script src="Scripts/jquery-1.6.1.min.js" type="text/javascript"></script>
    <script type = "text/javascript" >
        $(document).ready(function () {
            $("a").click(function () { alert("hello!"); return false; }); //對a標籤
            $("#hp").click(function () { alert("hello!"); return false; }); //對ID為HP
            $(".mp").click(function () { alert("hello!"); return false; }); //對class為mp 各自獨立
            $("*").addClass(); //表示所有物件
            //$("#bb1").click(function () { $("#Image1").addClass('css'); }); //套用CSS

            $("#box").hide();
            $("#bb1").click(function () { $("#box").toggle("slow"); });
            //屌光棒
            $("tr").hover(function () { $(this).addClass('color'); }, function () { $(this).removeClass('color'); });

            $("#bb1").click(function () { $("#tb1").attr({ disabled: "disabled" }); });

 

        });
    </script>
    <style type="text/css">
   
    .css{border:1px solid #ababab;}
    .color{background-color: red;}
        .style1
        {
            width: 100%;
        }
    </style>
</head>
<body>
    <form id="form1" runat="server">
   
    <asp:ScriptManager ID="ScriptManager1" runat="server">
    </asp:ScriptManager>
    <a href="#">dowmload</a>
    <a href="#" id="hp">dowmload2</a>
    <a href="#" class="mp">dowmload3</a><br>
    <asp:UpdatePanel ID="UpdatePanel1" runat="server">
        <ContentTemplate>
            <asp:Button ID="bb1" runat="server" Text="Button" /><br>
        </ContentTemplate>
   
    </asp:UpdatePanel>
    <asp:TextBox ID="tb1" runat="server"></asp:TextBox>
    <asp:Image ID="Image1" runat="server" ImageUrl="~/img/logo.png" />
    <div class="asd" id="box">
    123456789
    </div>

 

    </form>
            <table class="style1" id="bg">
                <tr>
                    <td>
                        1</td>
                </tr>
                <tr>
                    <td>
                        2</td>
                </tr>
                <tr>
                    <td>
                        3</td>
                </tr>
                <tr>
                    <td>
                        4</td>
                </tr>
                <tr>
                    <td>
                        5</td>
                </tr>
                <tr>
                    <td>
                        6</td>
                </tr>
            </table>
</body>
</html>