【问题标题】:Javascript variable with function call to .cshtml带有对 .cshtml 的函数调用的 Javascript 变量
【发布时间】:2015-05-24 15:42:19
【问题描述】:

我有一个 asp.net MVC 项目,并且在其中一个 .cshtml 文件中我有一个 jquery 微调器。单击按钮时,它会获取微调器的值。我希望在 .cshtml 文件中获取微调器值并调用函数(C#)并将变量传递给函数。

这是我在 cshtml 中的 jquery 代码。我正在尝试实现一个 ajax POST 方法来调用函数“GetData”,其中函数驻留在 Index.cshtml(此代码所在的文件)中的间隔值

        $('#getvalue').on('click', function (event) {
            var interval = spinner.spinner("value");
            // Make the ajax call
            $.ajax({
                type: "POST",
                url: "@Url.Action("GetData", "Index")",
                contentType: "application/json; charset=utf-8",
                data: interval,
                dataType: "json",
                success: function (result) {
                    alert('It worked!');
                },
                error: function(exception){alert('Exeption:'+exception);
                }
            });
        });

GetData函数是这样的,因为在cshtml里面所以定义为@Helper函数

       @helper GetData(int interval)
       {
           var xdata = Model.Select(model => model.Id).Take(10).ToList();
       }

ajax 调用抛出异常(Exception [object Object])。我对此不起作用的主要怀疑是1)我的“数据”格式和2)“url”是正确的。

我不仅限于考虑 ajax,我对任何可以调用函数并将变量从 Javascript/Jquery 传递到 .cshtml 中的 @Helper 函数的方法持开放态度(如果这确实是最好的方法),也许我应该更多地使用 .cs 文件,即控制器?

任何帮助和指导将不胜感激。

【问题讨论】:

    标签: javascript jquery asp.net-mvc razor


    【解决方案1】:

    在这篇文章中建议了可行的解决方案 - asp.net mvc3 return multiple json list

    我已将我的 GetData 函数从 cshtml 中移出,并将其放在 controller.cs 中

        [HttpPost] // can be HttpGet
        public ActionResult GetData(int interval)
        {
            //use interval value here ...
    
            return Json(new { XList = strxdata, YList = strydata }, JsonRequestBehavior.AllowGet);
        }
    

    我使用 AJAX 请求从 cshtml 调用 GetData 函数,然后在相同的 JS 代码中处理返回的数据。

         $.ajax({
                url: '/SController/GetData',
                type: 'POST',
                contentType: 'application/json;',
                data: JSON.stringify({ id: interval }),
                success: function (result) {
                    $.each(result, function (i, item) {
                        alert(result.XList);
                        alert(result.YList);
                    });
                    //process the returned data here ....
                    var jxArray = result.XList.split(',');
                    var jyArray = result.YList.split(',');
                    }
            });
    

    我希望这对其他人有所帮助,事实上,我认为将代码拆分到控制器中比使用 @helper 函数在技术上更正确。

    【讨论】:

      【解决方案2】:

      如果要在视图中调用函数,为什么要使用 ajax? AJAX用于向服务器发送数据,这里只需要在click事件中调用helper函数即可。

      就这样吧。

       $('#getvalue').on('click', function (event) {
            var interval = spinner.spinner("value");
            var result = @GetData(interval);
            if(result!=null || result!= 'undefined') {
               alert('It worked!');
            }
       }
      

      【讨论】:

      • 当我测试这个解决方案时,我遇到的错误是 GetData 原型中的“间隔”是“脱离上下文”。
      • 为什么要将间隔传递给 GetData 助手?它甚至没有使用那个变量。
      猜你喜欢
      • 2020-11-09
      • 1970-01-01
      • 1970-01-01
      • 2011-09-30
      • 2017-07-20
      • 1970-01-01
      • 1970-01-01
      • 2013-08-21
      • 1970-01-01
      相关资源
      最近更新 更多