asp.net mvc 与JavaScript ajax使用（刚学不久，想必很菜，希望对刚学的同学有用）

最新推荐文章于 2022-03-18 20:02:32 发布

826625187

最新推荐文章于 2022-03-18 20:02:32 发布

阅读量255

点赞数

文章标签： javascript mvc ajax

本文链接：https://blog.csdn.net/u012935474/article/details/45331437

版权

<span style="font-family: Arial, Helvetica, sans-serif;">这个是前端页面的Index.cshtml</span>

</pre><pre name="code" class="html">@{
    Layout = null;
    
}

<!DOCTYPE html>

<html>
<head>
    <title>基于mvc架构的MATLAB在线实现平台</title><!--添加标签标题-->
    <link rel="shortcut icon" href="../../images/favicon.ico"><!--添加标签图标-->
    @* 引入jQuery库文件 *@
    <script src="../../Scripts/jquery-2.1.3.js" type ="text/javascript" ></script>
    <!--引用css文件-->
   <link rel ="stylesheet" type ="text/css" href ="../../Content/themes/mycss.css" />
    <script src="../../Scripts/myajax.js" type="text/javascript"></script>
    
</head>
<body>
    
    <div class="total">
    <div class ="leftempty"></div>
    <div class="totalcontent">
    <div class ="header">
         <div class="middleheader">
        <div class ="leftmiddle"></div>
            <div class ="rightmiddle">
        <p class ="font1 " >基于mvc架构的MATLAB在线实现平台</p>
                </div>
            </div>
        <div class="upheader"></div>
       
    </div>
        <p></p><!--仅画一段白色线-->
      
   <div class="content">
       <div class ="contentleftsider" id="wode">
           <p>输出：</p>
           <textarea id="textoutput" cols="70" rows="20" readonly="readonly"></textarea>
           <p>输入命令：</p>
           <p><textarea id="textcommand" cols ="50" rows="3"></textarea>  
               <input id="submit" type="button"  value ="执行"  onclick ="BtnExcute() "/></p>
       </div>
       <div class="contentrightsider">
           <p>历史记录</p>
           <textarea id="texthistory" cols="70" rows ="25 " ></textarea>
       </div>
   </div>
        </div>
        </div>
    
</body>
    
</html>

</pre><pre name="code" class="html">这个是<span style="font-family: Arial, Helvetica, sans-serif;">myajax.js文件，使用ajax与服务器联系</span>

function BtnExcute() {
    var wearebest = $("#textcommand").val();
            $.ajax(
          {
              type: "POST",//通常会用到两种：GET,POST。默认是：GET
              //(默认: 当前页地址) 发送请求的地址
              async:true,
              dataType: "text",//预期服务器返回的数据类型。
              data: "id=wearebest",
              url:"Home/Returnstring",
              success: callback,//请求成功，callback为调用服务器后要执行的函数
              complete:completeall//调用服务器结束后执行的函数
              

          });
        }
function callback(responsetext)//responsetext为调用服务器程序后返回的值
        {
   
    alert(responsetext);
}
function completeall()
{
    alert("hava complete");
}

这个是服务器代码Homecontroller.cs文件

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
using System.Threading;
namespace justdoit.Controllers
{
    public class HomeController : Controller
    {
        //
        // GET: /Home/

        public ActionResult Index()
        {
            return View();
        }
        public string  Returnstring()
        {
           var getstr=Request.Form["id"]; 
            //return Content("dsfkjdsfjdskj");
            return getstr;
        }
            
        

    }
}

这个是css文件

body { 
    
}
.total {
        width:1300px;
        height :620px;
        }
        .leftempty {
        width:100px;
        height :620px;
        background :#ffffff;
         float:left ;
        }
        .totalcontent {
        width:1200px;
        height:620px;
         float:left ;
        
        }
   .header{
   width :1200px;
    height:120px;
    background:#666666;
    color:#ffffff; 
    background-image :url("../../images/header.jpg") ;
    background-repeat :repeat-x ;
   }
        .upheader {
        width:1200px;
        height:20px;
        
        }
        .middleheader {
        width:1200px;
        height:60px;
        }
        .leftmiddle {
        width:200px;
        height:60px;
        float:left ;
        }
        .rightmiddle {
        width:1000px;
        height:60px;
        float:left;
        }
        .content {
        width:1200px;
        height :500px;
        background:#409d0e;
       
        
        }
        .contentleftsider {
        width:600px;
        height:500px;
        background:#409d0e;
        float:left ;
        }
        .contentrightsider {
        width:600px;
        height:500px;
        background:#409d0e;
        float:left ;
        }
        
        .font1 {
        font-size :50px;
        color :blue;
        font-weight :bold ;
        
        }