C#.Net前端数据post传递方法(mvc)

原创 2017年11月17日 09:27:28

Model :Entity实体模型中的数据组织,对应sql数据库中的表建立相应的类库

这里写图片描述

using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Threading.Tasks;

namespace Entity
{
    /// <summary>
    /// 焦点图
    /// </summary>
    [Serializable]
    public partial class FocusImg
    {
        public FocusImg()
        { }
        #region Model
        private int _id;
        private string _ImgSrc;
        private string _Url;
        private string _Title;
        private DateTime? _BgTime;
        private DateTime? _EndTime;
        private bool? _State;
        #endregion

        public int Id
        {
            set { _id = value; }
            get { return _id; }
        }
        public string ImgSrc
        {
            set { _ImgSrc = value; }
            get { return _ImgSrc;  }
        }
        public string Url
        {
            set { _Url = value; }
            get { return _Url; }
        }
        public string Title
        {
            set { _Title = value; }
            get { return _Title; }
        }
        public DateTime? BgTime
        {
            set { _BgTime = value; }
            get { return _BgTime; }
        }
        public DateTime? EndTime
        {
            set { _EndTime = value; }
            get { return _EndTime; }
        }
        public bool? State
        {
            set { _State = value; }
            get { return _State; }
        }

    }
}
//其中 public DataTime? BgTime {}  中的 数据类型加?问号,表示该值可以为空值

在Controllers控制器中,实现FocusImg类与数据库中进行交互


namespace Dal
{///....
#region 图片上传
public static string jiaodiantu()
{
 //SqlHerper类是自定义的数据库交互类,将原本的sql语句进行简化
    var dt = SqlHelper.ExecuteDataTable("SELECT *  FROM dbo.FocusImg ");
    return JsonHelper.DataTableToJSON(dt);
}
///....
}
#endregion


using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
using Entity;
using Tools;
using Webdiyer.WebControls.Mvc;
using Dal;
namespace WebSite.Controllers
{
    public class AdminController : Controller
    {
        // GET: Admin
        public ActionResult Index()
        {
            return View();
        }

        public ActionResult jiaodiantu()
        {
            var json = SiteDal.jiaodiantu();
            var fImgData = JsonHelper.JSONToObject<List<FocusImg>>(json);

            return View(fImgData);
        }

        [HttpPost]
        public ActionResult SaveJiaoDianTuData(FocusImg data)
        {
            var postData = data;

            string code = postData.ImgSrc;
            //base64编码转存成图片
            string codeBase64 = code.Split(',')[1];

            byte[] bytes = Convert.FromBase64String(codeBase64);

            //以时间序列命名图片文件
             DateTime now = DateTime.Now;
            string dtString = now.Year.ToString()
            + now.Month.ToString().PadLeft(2, '0')
            + now.Day.ToString().PadLeft(2, '0')
            + now.Hour.ToString().PadLeft(2, '0')
            + now.Minute.ToString().PadLeft(2, '0')
            + now.Second.ToString().PadLeft(2, '0')
            + now.Millisecond.ToString().PadLeft(3, '0');

            string fileName = dtString + ".jpg";
            string filePath = "~/images/Focus/" + fileName;
            ///映射为物理路径

            string fullPath = Server.MapPath(filePath);

            System.IO.File.WriteAllBytes(fullPath, bytes);


            int state = 0;
            if(postData.State==true)
            {
                state = 1;
            }

            string cmdText = $@"
                            INSERT dbo.FocusImg
                                     ( ImgSrc ,
                                       Url ,
                                       Title ,
                                       BgTime ,
                                       EndTime ,
                                       State
                                     )
                             VALUES  ( N'{fileName} ' , -- ImgSrc - nvarchar(1000)
                                       N'{postData.Url}' , -- Url - nvarchar(1000)
                                       N'{postData.Title}' , -- Title - nvarchar(1000)
                                       GETDATE() , -- BgTime - datetime
                                      DATEADD(MONTH,1,GETDATE()) , -- EndTime - datetime
                                       {state}  -- State - bit
                                     )
                                ";
            SqlHelper.ExecuteNonQuery(cmdText);

          //  img.Save("~/images/Focus/a.jpg");


            return Content(" ");
        }
    }
}

在View视图中,对前端的页面进行编辑cshtml类型文件

@model System.Collections.Generic.List<Entity.FocusImg>

@{
    ViewBag.Title = "title";
    Layout = "~/Views/Admin/_Layout.cshtml";
}


<script type="text/javascript">
    function submitImgClick() {
        var fileName = document.getElementById("imgFile").files;
        var img = $("#imgDiv").children("img").attr('src');    
        var statePost = $("#state option:selected").text();
        var stateNum = false;
        if (statePost == "公开")
        {
            stateNum = true;
        }     

        $.post("/Admin/SaveJiaoDianTuData",
            { Title: $("#Title").val(), ImgSrc:img, Url: $("#Url").val(), State: stateNum },
            function (result) {

            });       
        $(location).attr('href', 'jiaodiantu');

    }



    function uploadImg(){
        window.open("uploadImg.aspx");
    }

    //修改数据,以及数据库中该条数据修改
    function imgAlter(id) {
        //var tr = document.getElementById(id);
        //alert(tr.rows.cells[0].innerHTML);

    }

    //删除table.row数据,以及数据库中的改数据(id)
    function imgDelete(id) {
        //
        var tr = document.getElementById(id);
        tr.parentNode.removeChild(tr);
    }

</script>

@*<button class="btn" onclick="uploadImg()">上传图片</button>*@
<a data-toggle="modal" href="#modalDefault" class="btn ">上传数据</a>

<!-- Table Hover 图片列表-->
<div class="block-area" id="tableHover">
    <h2 class="block-title">图片列表</h2>
    <div class="table-responsive overflow">
        <table class="table table-bordered table-hover tile" id="imgTable">
            <thead>
                <tr>
                    <th>序号</th>
                    <th>图片</th>
                    <th>图片位置</th>
                    <th>链接地址</th>
                    <th>标题</th>
                    <th>开始时间</th>
                    <th>结束时间</th>
                    <th>状态</th>
                    <th>操作</th>
                </tr>
            </thead>
            <tbody>
                @{
                    foreach (var item in Model)
                    {
                        <tr id="@item.Id">
                            <td>@item.Id</td>
                            <td><img src="~/images/Focus/@item.ImgSrc" style="width:250px;height:120px;"> </td>
                            <td>@item.ImgSrc</td>
                            <td>@item.Url</td>
                            <td>@item.Title</td>
                            <td>@item.BgTime</td>
                            <td>@item.EndTime</td>
                            <td>@item.State</td>
                            <td>                                
                                <a  data-toggle="modal" href="#modalNarrower" class="btn btn-sm" onclick="imgAlter(@item.Id)">修改</a>
                                <button id="imgDele" class="btn btn-sm " onclick="imgDelete(@item.Id)">删除</button>                            

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



<!-- Modal Default  上传图片弹窗-->
<div class="modal fade" id="modalDefault" tabindex="-1" role="dialog" aria-hidden="true" style="display: none;">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
                <h1 class="modal-title">图片上传</h1>
            </div>
            <div class="modal-body">
                <h3> 标题</h3>
                <input type="text" class="form-control m-b-10" placeholder="Default" id="Title"><br />

                <h3>上传图片</h3>
                <div class="fileupload fileupload-new" data-provides="fileupload">
                    <input type="hidden" value="">
                    <div id="imgDiv" class="fileupload-preview thumbnail form-control"></div>

                    <div>
                        <span class="btn btn-file btn-alt btn-sm">
                            <span class="fileupload-new">选择图片</span>
                            <span class="fileupload-exists">Change</span>
                            <input id="imgFile" type="file" name="">
                        </span>
                        <a href="#" class="btn fileupload-exists btn-sm" data-dismiss="fileupload">Remove</a>
                    </div>
                </div>

                <br />
                <h3>链接地址</h3>
                <input type="text" class="form-control m-b-10" placeholder="Default" id="Url" ><br />
                <h3>状态</h3>
                <select class="form-control m-b-10" id="state">
                    <option>公开</option>
                    <option>私密</option>                    
                </select>



            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-sm" id="submitImg" onclick="submitImgClick()"  >保存更改</button>
                <button type="button" class="btn btn-sm" data-dismiss="modal">取消</button>

                @*<button type="submit" class="btn btn-info btn-sm m-t-10">SUBMIT FORM</button>*@

            </div>
        </div>
    </div>
</div>


 <!-- Modal Narrower 修改图片弹窗 -->
<div class="modal fade" id="modalNarrower" tabindex="-1" role="dialog" aria-hidden="true" style="display: none;">
    <div class="modal-dialog modal-sm">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
                <h4 class="modal-title">修改图片</h4>
            </div>
            <div class="modal-body" id="modalBody">
                <h3> 标题</h3>

                <input type="text" class="form-control m-b-10" placeholder="Default" id="inputTitle" value="Table表获取数据"><br />
                <h3>上传图片</h3>
                <div class="fileupload fileupload-new" data-provides="fileupload">
                    <input type="hidden" value="" name="">
                    <div class="fileupload-preview thumbnail form-control">
                    </div>
                    <div>
                        <span class="btn btn-file btn-alt btn-sm">
                            <span class="fileupload-new">Select image</span>
                            <span class="fileupload-exists">Change</span>
                            <input type="file" name="">
                        </span>
                        <a href="#" class="btn fileupload-exists btn-sm" data-dismiss="fileupload">Remove</a>
                    </div>
                </div>
                <br />
                <h3>链接地址</h3>
                <input type="text" class="form-control m-b-10" placeholder="Default" id="inputUrl" value="Table表获取数据"><br />

                <h3>状态</h3>
                <select class="form-control m-b-10">
                    <option>公开</option>
                    <option>私密</option>
                </select>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-sm" onclick="">保存修改</button>
                <button type="button" class="btn btn-sm" data-dismiss="modal">取消</button>
            </div>
        </div>
    </div>
</div>

<!-- Javascript Libraries -->
<!-- jQuery -->
<script src="js/jquery.min.js"></script> <!-- jQuery Library -->
<script src="js/jquery-ui.min.js"></script> <!-- jQuery UI -->
<!-- Bootstrap -->
<script src="js/bootstrap.min.js"></script>
<!--  Form Related -->
<script src="js/validation/validate.min.js"></script> <!-- jQuery Form Validation Library -->
<script src="js/validation/validationEngine.min.js"></script> <!-- jQuery Form Validation Library - requirred with above js -->
<script src="js/select.min.js"></script> <!-- Custom Select -->
<script src="js/chosen.min.js"></script> <!-- Custom Multi Select -->
<script src="js/datetimepicker.min.js"></script> <!-- Date & Time Picker -->
<script src="js/colorpicker.min.js"></script> <!-- Color Picker -->
<script src="js/icheck.js"></script> <!-- Custom Checkbox + Radio -->
<script src="js/autosize.min.js"></script> <!-- Textare autosize -->
<script src="js/toggler.min.js"></script> <!-- Toggler -->
<script src="js/input-mask.min.js"></script> <!-- Input Mask -->
<script src="js/spinner.min.js"></script> <!-- Spinner -->
<script src="js/slider.min.js"></script> <!-- Input Slider -->
<script src="js/fileupload.min.js"></script> <!-- File Upload -->
<!-- Text Editor -->
<script src="js/editor2.min.js"></script> <!-- WYSIWYG Editor -->
<script src="js/markdown.min.js"></script> <!-- Markdown Editor -->
<!-- UX -->
<script src="js/scroll.min.js"></script> <!-- Custom Scrollbar -->
<!-- Other -->
<script src="js/calendar.min.js"></script> <!-- Calendar -->
<script src="js/feeds.min.js"></script> <!-- News Feeds -->
<!-- All JS functions -->
<script src="js/functions.js"></script>

使用post方法将前端页面值传到数据库

function submitImgClick() {
        var fileName = document.getElementById("imgFile").files;
        var img = $("#imgDiv").children("img").attr('src');    
        var statePost = $("#state option:selected").text();
        var stateNum = false;
        if (statePost == "公开")
        {
            stateNum = true;
        }     

        $.post("/Admin/SaveJiaoDianTuData",
            { Title: $("#Title").val(), ImgSrc:img, Url: $("#Url").val(), State: stateNum },
            function (result) {

            });       
        $(location).attr('href', 'jiaodiantu');

    }

使用razor读取Model中的可以用@{//嵌入Html页面的方法}

 <tbody>
                @{
                    foreach (var item in Model)
                    {
                        <tr id="@item.Id">
                            <td>@item.Id</td>
                            <td><img src="~/images/Focus/@item.ImgSrc" style="width:250px;height:120px;"> </td>
                            <td>@item.ImgSrc</td>
                            <td>@item.Url</td>
                            <td>@item.Title</td>
                            <td>@item.BgTime</td>
                            <td>@item.EndTime</td>
                            <td>@item.State</td>
                            <td>                                
                                <a  data-toggle="modal" href="#modalNarrower" class="btn btn-sm" onclick="imgAlter(@item.Id)">修改</a>
                                <button id="imgDele" class="btn btn-sm " onclick="imgDelete(@item.Id)">删除</button>                            

                            </td>
                        </tr>
                    }
                }

使用 Post 方法传递数据

使用 Post 方法传递数据 --ASP.net 示例在paike.3g.cn/zdtu/TestRecPostData.aspx 以及CommonBg/Test/TestPostData.as...
  • fxhflower
  • fxhflower
  • 2012年09月05日 16:02
  • 10520

SpringMVC之前台post方式传递的json格式参数无法到后台

在项目开发中,后台接口开发好了,在本地用postman测试都是没有问题了,前台开发联调后,发现用get方式没问题,但是前台post方式以json方式穿过的的参数,到后台,后台的参数为null,解决方法...
  • tianjun2012
  • tianjun2012
  • 2016年01月28日 09:35
  • 6321

springMVC中前端将传递数据传递到后端后端的接收方式

前提:springmvc可以自动将json数据转化为Java对象,而将对象转化为json数据,必须在配置文件中配置!,需要注解@responseBody,需要json包 在Java中,前端传递数据的...
  • m0_37601318
  • m0_37601318
  • 2017年10月17日 15:35
  • 824

C#中POST数据和接收的几种方式

POST方式提交数据,一种众所周知的方式: html页面中使用form表单提交,接收方式,使用Request.Form[""]或Request.QueryString[""]来获取。   这里介...
  • jiangfei009003
  • jiangfei009003
  • 2017年04月27日 15:54
  • 1006

asp.net MVC接收前端传递的复杂json对象的简单处理方法

有时候,我们需要从页面传递一组数据到后台,但同时又需要传递几个独立的参数,这种情况很伤脑筋。 网上有各种各样的说法和办法,但都不好用,或没有说到关键的地方。 还有的建议传字符串后台格式化或解析,也...
  • foren_whb
  • foren_whb
  • 2017年12月25日 15:49
  • 206

MVC传递List对象

手机上需要向服务器传递List对象,搞了半天才成功,不然就只能传递数组对象,或者将对象拼成字符串传递了。 不多说了,上代码吧。 手机端: public void addTime(List addTim...
  • onepiece2
  • onepiece2
  • 2015年01月06日 16:52
  • 6108

MVC之实体数据传递

前端、     用户名:     年  龄:     电  话:     @*user:@Model.UserName     age:@Model.age     tele:@Model.tel*...
  • dawngekai
  • dawngekai
  • 2017年02月13日 15:15
  • 426

利用ajax实现前台javascript同c#后台MVC下的controller层传递数据的方法

在之前的文章中介绍了有关c# web开发框架下的aspx.cs文件与javascript的数据交换,这个方法对于MVC框架下的程序来讲并不好用。下面这个方法可以实现在MVC框架中,前台cshtml 的...
  • qq_36735409
  • qq_36735409
  • 2017年11月23日 13:33
  • 189

获取前端传送的数据及登陆验证--个人学习Django的一些总结

后端接受前端传送传送过来的数据时,如果使用‘POST’方法, 例如接收用户名:  user_name = requset.POST.get('username', ' ') 其中get方法里的get(...
  • m0_37713013
  • m0_37713013
  • 2017年05月20日 16:02
  • 238

获取前端post方式传过来的JSON格式的数据的代码

public JSONObject getRequestContent(HttpServletRequest req) { JSONObject data = null; try { I...
  • koushr
  • koushr
  • 2016年04月11日 19:34
  • 3547
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:C#.Net前端数据post传递方法(mvc)
举报原因:
原因补充:

(最多只允许输入30个字)