【c#/MVC】运用MVC模式,做一个增删查改简单数据库,以及涉及到的知识

RT。

本文分三部分:程序结构、遇到问题、部分源代码在最后。

更新ing……

————————————————————————————————————————————

目录

程序结构:

遇到问题:

1、MVC三个部分之间的数值传递和调用(特别是控制器和视图之间)

2、MVC调用数据库的连接字符串设置

3、视图的局部刷新(ajax的使用)

几个在实验中的发现:

了解到的ajax资料:

4、相关的几个JS函数调用:

5、从视图将form表单的内容传递回控制器的简易方法

6、ADO.NET相关

7、Json

8、[HttpPost]

源代码:


————————————————————————————————————————————

程序结构:

辅助类:1个(SqlCommandHelper),其中有两个方法:(源代码在最后)

public List<MVCStudent2.Models.Student> GETStudentMessage(string sqlStr,int id)
//用于使用dataReader方式从数据库中读取表单数据

 public bool WriteStudentMessage(string sqlStr, SqlParameter[] para)
//用于向数据库中写入数据

视图、控制器、和模型部分:如图

遇到问题:

1、MVC三个部分之间的数值传递和调用(特别是控制器和视图之间)

当建立好模型后,就要根据模型来做好视图和控制器,因为本次练习涉及的页面很少,只建立了一个模型:student,以及一个控制器:StudentDB,而与两者相对有很多视图。继续拿出这张图:

其中:(注,这里仅仅列举用到的方法,更多的没有接触的没有列举)

控制器-》模型-》视图:这一条没啥说的,直接调用就好了(补充:这里似乎有所要求,遗漏了什么,日后补充),然后根据下面到视图

控制器-》视图:如果没有数据的话,仅仅是直接调用视图,ActionResult方法直接返回视图的名字(不带名字就返回默认同名的视图);如果带有数据,可以return一个Json(注意方法的返回类型也要变成JsonResult;Json很好用,里面是类的话,可以直接取出属性。),也可以return Content(变量);

视图-》用户-》控制器:带数据利用form表单比较好用(局部时则利用AJAX),也可以通过herf直接不带数据直接调用控制器.

 

2、MVC调用数据库的连接字符串设置

在主目录(非视图下的目录)的WEB.CONFIG文件里的<appSettings>中,新增一个KEY,例:

 <appSettings>
    <add key="webpages:Version" value="3.0.0.0"/>
    <add key="webpages:Enabled" value="false"/>
    <add key="ClientValidationEnabled" value="true"/>
    <add key="UnobtrusiveJavaScriptEnabled" value="true"/>

新增下面这一行,key的名字自己取,数据源的字符串可以通过服务器资源管理器快速得到
建议用账户密码方式连接
    <add  key="studentsConstr" value="Data Source=SANDBOXV2DEV146\TAORYAN;Initial Catalog=test;Persist Security Info=True;User ID=sa;Password=**********"/>

  </appSettings>

这是新版.net Framework的方法,老版的方式是在<connectionStrings>中设置字符串,不过新版自己试过后,并不可以用,网上教程全市老版的………………

老版实例:

  <connectionStrings>
同样的,name自己取,Data Source是连接字符串
注意最后有个providerName的属性为"System.Data.SqlClient"
    <add name="studentsConstr"
   connectionString="Data Source=SANDBOXV2DEV146\TAORYAN;Initial Catalog=test;Persist Security Info=True;User ID=sa;Password=*********"
    providerName="System.Data.SqlClient"/>
  </connectionStrings>

不论新版老版,设置好后,在控制器中,用一句

string conStr = ConfigurationManager.AppSettings["studentsConstr"];
SqlConnection conn = new SqlConnection(conStr);

即可取得你设置好的连接字符串,以后要修改时也只要在WEB.CONFIG里修改一次即可,是不是很好用~~~

3、视图的局部刷新(ajax的使用)

这是个难点,因为做之前完全没学过ajax。

先把遇到的问题阐述:在更新学生信息的视图中,用户需要先输入一个对应的ID,如果存在,在下方显示几个文本框input,input里放着取出的信息,然后将要修改的信息修改后,点击提交,就可以将新的信息通过控制器提交到数据库。

这其中,如何让新出现的input中刷新取得的信息(局部页面刷新)?就要用到ajax了。

先通过js的函数设置点击事件,然后在事件中写上ajax方法。我的代码如下。

function toSubmit() {
       //当点击按钮后,就调用这里的方法
        //这里面可以做表单提交前的验证判断
        $("#submitIdRequest").submit;
        var studentId = $("#studentid").val();//定义个变量,在下边的ajax内获取这个变量
        hidden2();
        //文本框对象
        var textId = $("#Id2");
        var textName = $("#Name");
        var textNumber = $("#Number");
        var textSex = $("#Sex");
        var textAge = $("#Age");
        var textCourse1 = $("#Course1");
        var textCourse2 = $("#Course2");
        //alert(studentId);

         //这里写ajax方法
        //ajax主要是在不重新加载整个页面情况下,与服务器交换数据,并刷新部分页面
        $.ajax({
            url: "/StudentDB/UpdateAjax_test",
            data: { studentID: studentId },//将从后台(control里获取的数据赋值给这里定义的变量)
            async: true,//异步
            type: "post",
            dataType: "json",
            success: function (data)//当方法成功时,执行……
            {
                //alert(data.id,data.name);
                if (data) {
                    alert("update sucessfully!");
                    textId.val(data.id);
                    textName.val(data.name);
                    textNumber.val(data.number);
                    textSex.val(data.sex);
                    textAge.val(data.age);
                    textCourse1.val(data.course1);
                    textCourse2.val(data.course2);
                    //alert(@ViewData["id"]);
                    //textid.val('@ViewData["id"]');
                    //location.href = '/StudentDB/UpdateAjax_test2';
                    //complete:studentDetailsBack();
                }
                else {
                    alert("update fail!");
                }
            }
        });
    }

几个在实验中的发现:

  • ajax的回调函数(success和error)中,不可以使用ViewDataviewbag的,这两个只能在静态的页面部分使用,使用语法是【@ViewData["属性名"]】和【var id='@ViewBag.id';】(怀疑是异步的原因)
  • ajax的回调函数可以执行控制器的方法,也可以直接跳转其他页面【//location.href = '/StudentDB/UpdateAjax_test2';
  •                    】【 //complete:studentDetailsBack();】
  • 虽然一般从后台取数据用get传数据用post,但其实post和get方式都可以从后台取得数据,get还没试过,post的话,不需要在data中设置要取的数据名(这里设置的是传入后台的数据名),而是直接在后台方法中返回一个json就可以用了(返回类型是JsonResult)
  • 查资料时,似乎可以同时存在两个ajax,不过其中一个要在另一个的回调函数中(通过function方式),且要设置async为同步(即false),最后嫌麻烦没有试,以后有机会试试。

了解到的ajax资料:

代码模板:

$.ajax({
             type: "POST",
             url: "/login",
             contentType: 'application/x-www-form-urlencoded;charset=utf-8',
             data: {username:$("#username").val(), password:$("#password").val()},
             dataType: "json",
             success: function(data){
                         console.log(data);
                      },
             error:function(e){
                         console.log(e);
             }
         });

参数解释:

参数(列举几个,太多了……)
名称optionsasyncbeforeSend(XHR)cachecomplete(XHR, TS)contentTypecontextdatadataFilterdataType
类型ObjectBooleanFunctionBooleanFunctionStringObjectStringFunctionString
默认值 true(异步),可改为false(同步) 

默认值: true,dataType 为 script 和 jsonp 时默认为 false。

 

参数: XMLHttpRequest 对象和一个描述请求类型的字符串。默认值: "application/x-www-form-urlencoded"。发送信息至服务器时内容编码类型。这个对象用于设置 Ajax 相关回调函数的上下文。也就是说,让回调函数内 this 指向这个对象发送到服务器的数据。将自动转换为请求字符串格式提供 data 和 type 两个参数:data 是 Ajax 返回的原始数据,type 是调用 jQuery.ajax 时提供的 dataType 参数。函数返回的值将由 jQuery 进一步处理。

"xml"

"html"

"script"

"json"

"jsonp

""text"

作用AJAX 请求设置。所有选项都是可选的。 

发送请求前可修改 XMLHttpRequest 对象的函数,如添加自定义 HTTP 头。

XMLHttpRequest 对象是唯一的参数。

设置为 false 将不缓存此页面。请求完成后回调函数 (请求成功或失败之后均调用)。默认值适合大多数情况。如果你明确地传递了一个 content-type 给 $.ajax() 那么它必定会发送给服务器(即使没有数据要发送)。(如果不设定这个参数,那么 this 就指向调用本次 AJAX 请求时传递的 options 参数)。GET 请求中将附加在 URL 后。给 Ajax 返回的原始数据的进行预处理的函数。预期服务器返回的数据类型。
可选同步请求将锁住浏览器,用户其它操作必须等待请求完成才可以执行。这是一个 Ajax 事件。如果返回 false 可以取消本次 ajax 请求。jQuery 1.2 新功能。这是一个 Ajax 事件。 比如指定一个 DOM 元素作为 context 参数,这样就设置了 success 回调函数的上下文为这个 DOM 元素。如果为数组,jQuery 将自动为不同值对应同一个名称。如 {foo:["bar1", "bar2"]} 转换为 '&foo=bar1&foo=bar2'。 如果不指定,jQuery 将自动根据 HTTP 包 MIME 信息来智能判断,比如 XML MIME 类型就被识别为 XML。

4、相关的几个JS函数调用:

//打开时某个ID自动隐藏,并在某个方法中设置显示
function hidden1() { document.getElementById("dispaly1").style.display = "none";}
function hidden2() { document.getElementById("dispaly1").style.display = "block"; }
window.onload = hidden1;
//我也不知道有没有用……
//当文本框内容改变时,触发对应的事件,并把自己的ID作为参数
<label>name:</label><input type="text" id="Name" name="Name" class="change" onchange="textChange(this.id)" /><br />

5、从视图将form表单的内容传递回控制器的简易方法

在视图的form中设置各个input的name后

在相应的控制器方法中,设置参数为【FormCollection f】,这个参数可以提供窗体传回来的所有值。

例如:一个【f.xxxx】就可以获得。

//view
<form action="DelDetaile" method="post">
    <div>
        <label>I D</label><input type="text" name="Id" />
    </div>
    <input type="submit" value="提交" />
</form>

//Controller中
public ActionResult DelDetaile(FormCollection f)
        {
            string sqlStr = "DelStudentDetails";
            SqlParameter[] para = { new SqlParameter("@id", SqlDbType.Int) };
            para[0].Value = f["Id"];
            SqlCommandHelper sqlCommandHelper = new SqlCommandHelper();
            bool judgeWriteStudentMessage = sqlCommandHelper.WriteStudentMessage(sqlStr, para);
            if (judgeWriteStudentMessage == false)
            { return View("FalseOperation"); }
            else
            { return View("SuccessfulOperation"); }
        }

 

6、ADO.NET相关

感觉没啥写的……

把上面第5中的sqlCommandHelper.WriteStudentMessage(sqlStr, para);方法体贴出来吧……

public bool WriteStudentMessage(string sqlStr, SqlParameter[] para)
{
            SqlConnection conn = new SqlConnection(conStr);
            SqlCommand cmd = new SqlCommand(sqlStr, conn);
            cmd.CommandType = System.Data.CommandType.StoredProcedure;
            conn.Open();
            cmd.Parameters.AddRange(para);
            SqlDataReader dataReader = cmd.ExecuteReader();
            cmd.Parameters.Clear();
            dataReader.Close();
            conn.Close();

            return true;
}

7、Json

JSON 是轻量级的文本数据交换格式,JSON 文本格式在语法上与创建 JavaScript 对象的代码相同,JSON 比 XML 更小、更快,更易解析。

目前仅仅在从控制器传递到视图中的ajax方法时用到……

将控制器的方法设置为【JsonResult】,然后返回值返回一个JSON,在对应的视图中直接【 var textId = $("#Id2");】(data为取得json的返回值,实际上就是json本身)

8、[HttpPost]

System.Web.Mvc.dll中对它的注解是:表示一个特性,该特性用于限制操作方法,以便该方法仅处理 HTTP POST 请求
具体来讲,就是对于Mvc Controller中的方法,如果你希望该方法只能通过前台表单的Post方式来访问并且传输数据的话,通过添加[HttpPost]注解即可实现,这样,该方法就不会通过Get方法进行请求,限制了该操作方法的请求类型。

同理,还有一个【HttpGet】。

此外,找到了一个不错的详细解说:链接地址

 

 

 

 

——————————————————————————————————————————————

源代码:

本来想直接贴出来……不过最后还是决定上传一下,因为太多了……

注意主目录(非views文件夹下)web.config的数据库地址要改成自己的

【源代码地址】https://download.csdn.net/download/qq_40245756/10875657

 

 

 

  • 6
    点赞
  • 23
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值