วันเสาร์ที่ 28 พฤศจิกายน พ.ศ. 2558

C# การสร้าง form register พร้อมการ upload รูปภาพ

1. สร้าง Model รับข้อมูล

    public class UserModel
    {
        public string FirstName { get; set; }

        public string LastName { get; set; }

        public HttpPostedFileBase File { get; set; }
    }

2.สร้าง function รับค่าใน controller

        public ActionResult Register(UserModel model)
        {
            if (model.File != null && model.File.ContentLength > 0)
            {
                var filename = Path.GetFileName(model.File.FileName);
                var path = Path.Combine(Server.MapPath("~/content/pics"), filename);
                model.File.SaveAs(path);
            }
            return RedirectToAction("Index");
        }

3. สร้าง form ใน view
    @using (Html.BeginForm("ชื่อฟังชัน", "ชื่อcontroller", FormMethod.Post, new { enctype = "multipart/form-data" }))
    {
        @Html.LabelFor(m => m.FirstName)
        @Html.TextBoxFor(m => m.FirstName)
        @Html.LabelFor(m => m.LastName)
        @Html.TextBoxFor(m => m.LastName)
        <input type="file" name="file" />
        <input type="submit" value="Search" />
    }

วิธีแก้ปัญหาการ upload file แล้วขึ้น error : Maximum request length exceeded.

ปัญหานี้เกิดจากการที่เรายังไม่ได้แก้คอนฟิกของเว็บให้รองรับการอับโหลดไฟล์ขนาดใหญ่ได้นั่นเอง
แก้โดยการไปที่ web.config แล้วเพิ่ม

<configuration>
    <system.web>
        <httpRuntime maxRequestLength="1048576" />
    </system.web>
</configuration>
 <system.webServer>
   <security>
      <requestFiltering>
         <requestLimits maxAllowedContentLength="1073741824" />
      </requestFiltering>
   </security>
 </system.webServer>
แค่นี้ก็จะเรียบร้อย

C# การสร้าง From รับข้อมูล โดยใช้ razor

1.สร้าง Model รับตัวแปรที่เราต้องการ 
    public class UserModel
    {
        public string FirstName { get; set; }

        public string LastName { get; set; }
    }

2. สร้าง View แสดงผลลัพธ์หลังจาก รับข้อมูลจาก form เสร็จ

3. สร้างฟังชัน 
        public ActionResult Search(UserModel model)
        {
            return View();
        }
4. สร้าง view รับข้อมูลจาก form
<div>
    <h1>Razor form</h1>
    @using (Html.BeginForm("Search", "Home"))
    {
        @Html.LabelFor(m => m.FirstName)
        @Html.TextBoxFor(m => m.FirstName)
        @Html.LabelFor(m => m.LastName)
        @Html.TextBoxFor(m => m.LastName)
        <input type="submit" value="Search" />
    }
</div>

วันศุกร์ที่ 27 พฤศจิกายน พ.ศ. 2558

AngularJs Post ส่งข้อมูลหลายๆข้อมูลไปที่ C# Controller

1.สร้างหน้ารับข้อมูลที่จะส่งไปให้ controller
<div ng-app="test-app">
    <h1>Angular</h1>
    <div ng-controller="test-controller">
        <input type="text" ng-model="startDate" />
        <input type="text" ng-model="endDate" />
        <button type="submit" ng-click="SendDataToController()">Sunmit</button>
        <div id="response">{{response}}</div>
    </div>
</div>

<script>
    var app = angular.module('test-app', []);
    app.controller('test-controller', function ($scope, $http) {

        $scope.SendDataToController = function () {
            var url = "./home/cal"
            $scope.DataRequest = { StartDate: $scope.startDate, EndDate: $scope.endDate }
            $http.post(url, $scope.DataRequest)
            .success(function (data, status) {
                $scope.response = data;
            })
        };
    })
</script>

2.สร้าง C#  Model
    public class RequestModel
    {
        public string StartDate { get; set; }

        public string EndDate { get; set; }
    }

3.สร้าง C# Controller รับข้อมูล
        public JsonResult Cal(RequestModel request)
        {
            return Json(request, JsonRequestBehavior.AllowGet);
        }

Jquery Ajax post ส่งข้อมูลหลายๆข้อมูล ถึง Controller ใน C#.Net

1.สร้าง view  รับข้อมูลจาก textbox เมื่อทำการกดปุ่ม Send ให้ส่งข้อมูลไปที่ controller

<script src="https://code.jquery.com/jquery-2.1.4.min.js"></script>
<input type="text" name="name" id="startDate" value=" " />
<input type="text" name="name" id="endDate" value=" " />
<button id="submit">Send</button>
<div id="response"></div>
<script>
    $("#submit").click(function () {
        var startDate = $("#startDate").val();
        var endDate = $("#endDate").val();
        var objRequest = { StartDate: startDate, EndDate: endDate };
        $.ajax({
            type: "POST",
            url: "./home/cal",
            data: JSON.stringify(objRequest),
            contentType: "application/json; charset=utf-8",
            success: function (data) {
                     $("#response").html(JSON.stringify(data)); },
            failure: function (errMsg) {
                alert(errMsg);
            }
        });
    });
</script>

2 สร้าง Model รับค่าใน C#

    public class RequestModel
    {
        public string StartDate { get; set; }

        public string EndDate { get; set; }
    }

3. สร้าง function ใน controller C# โดยเราจะทำการส่งข้อมูลที่ส่งมากลับไป

       public JsonResult Cal(RequestModel request)
        {
            return Json(request, JsonRequestBehavior.AllowGet);
        }