时间戳

首页 > 解决方案 > 如何从 javascript 调用 WCF 服务

javascript - 如何从 javascript 调用 WCF 服务

问题描述

我的页面上有几个输入字段。现在在按钮单击事件上，我想调用一个 WCF 服务，该服务负责将数据存储到数据库中。

<asp:Button runat="server" ID="btnCreateApplyTemplate" Text="Create" Style="text-transform: uppercase; color: #fff;"
                    CssClass="btn lr-small-btn-template lr-btn-success" ClientIDMode="Static" OnClientClick="return SaveMockTestData(this);" />

页面.ascx.cs

protected void Page_Load(object sender, EventArgs e)
        {
            if (!IsPostBack)
            {
                ScriptManager manager = ScriptManager.GetCurrent(Page);
                ServiceReference srMockTest = new ServiceReference("~/WCFSERVICES/MockTest.svc");
                manager.Services.Add(srMockTest);

                ScriptReference dd1 = new ScriptReference("~/SvcToDb/JsMocktest.js");
                manager.Scripts.Add(dd1);
            }
        }

现在让我向您展示文件中的内容，JsMocktest.js

    (function (global, undefined) {
    var mocktest = {};
    var mockTestData = {};


    function SaveMockTestData(args) {

        if (args.value == "Save Template") {

            mockTestData.TemplateName = mocktest.txtTemplateName.value;
            mockTestData.TotalMarks = mocktest.txtTotalMarks.value;
            mockTestData.ExamDuration = mocktest.txtDuration.value;
            mockTestData.TotalQuestion = mocktest.txtTotQuestion.value;

            //question types
            let chkisMcq = mocktest.chkisMcq.checked;
            let txtMcqTypePostvMark = mocktest.txtMcqTypePostvMark.value;
            let txtMcqTypeNegtvMark = mocktest.txtMcqTypeNegtvMark.value;

            let chkisNonMcq = mocktest.chkisNonMcq.checked;
            let txtNonMcqTypePostvMark = mocktest.txtNonMcqTypePostvMark.value;
            let txtNonMcqTypeNegtvMark = mocktest.txtNonMcqTypeNegtvMark.value;

            var questionTypes = {
                qtype: []
            };

            if (chkisMcq) {
                questionTypes.qtype.push({
                    "isMcq": true,
                    "PostiveMarks": txtMcqTypePostvMark,
                    "NegetiveMark": txtMcqTypeNegtvMark,
                });
            }
            if (chkisNonMcq) {
                questionTypes.qtype.push({
                    "isMcq": false,
                    "PostiveMarks": txtNonMcqTypePostvMark,
                    "NegetiveMark": txtNonMcqTypeNegtvMark,
                });
            }
            debugger;
            mockTestData.TotalQuestionType = questionTypes;

            var table = $('#tableContainer').tableToJSON({
                ignoreColumns: [3]
            }
                );

            mockTestData.TotalSections = table;

            mockTestData.CalculatorTupe = mocktest.ddlCalcType.value;
            mockTestData.IsAutoSave = mocktest.chkIsAutoSave.checked;
            mockTestData.IsQuizPause = mocktest.chkCanPause.checked;
            mockTestData.IsMultilingualSupport = mocktest.chkIsMultLingual.checked;

            mockTestData.ExamInstruction = mocktest.chkExamInstruction.checked;
            mockTestData.ExamInstructionId = mocktest.ddlExamInstruction.value;
            var IMockTetst = new WcfAjaxServices.IMockTest();
            debugger;
            IMockTetst.InsertTemplateData(mockTestData, function (result, context, OnSuccess) {

            }, function (error, context, OnError) {
                //toastify("error", "ppp", "System Error", "toast-bottom-right", true);
            }, null);
        }
        return false;
    }

    global.$MockTestControlID = mocktest;
    global.SaveMockTestData = SaveMockTestData;
})(window);

现在这里是服务，

public class MockTest:IMockTest
    {
        readonly BO_MockTest _objBoMockTest = new BO_MockTest();
        BL_MockTest objBL_BusinessPartners = new BL_MockTest();
        public int InsertTemplateData(TemplateData data)
        {
            _objBoMockTest.Flag = "1";
            _objBoMockTest.TemplateName = data.TemplateName;
            _objBoMockTest.TotalMarks = data.TotalMarks;
            _objBoMockTest.ExamDuration = data.ExamDuration;
            _objBoMockTest.TotalQuestions = data.TotalQuestion;
            //_objBoMockTest.TotalQuestionTypes = data.TotalQuestionType;
            //_objBoMockTest.TotalSections = data.TotalSections;
            _objBoMockTest.CalculatorType = data.CalculatorTupe;
            _objBoMockTest.IsAutoSave = data.IsAutoSave;
            _objBoMockTest.IsQuizPause = data.IsQuizPause;
            _objBoMockTest.IsMultilingualSupport = data.IsMultilingualSupport;
            _objBoMockTest.IsContainExamInstruction = data.ExamInstruction;
            _objBoMockTest.ExamInstructionId = data.ExamInstructionId;
            return 0;
        }
    }

这是界面，

[ServiceContract(Namespace = "WcfAjaxServices")]
    public interface IMockTest
    {
        [OperationContract]
        int InsertTemplateData(TemplateData data);
    }

    [DataContract]
    public class TemplateData
    {
        [DataMember]
        public string TemplateName { get; set; }
        [DataMember]
        public string TotalMarks { get; set; }
        [DataMember]
        public string ExamDuration { get; set; }
        [DataMember]
        public string TotalQuestion { get; set; }

        [DataMember]
        public string TotalQuestionType { get; set; }
        [DataMember]
        public string TotalSections { get; set; }
        [DataMember]
        public string CalculatorTupe { get; set; }
        [DataMember]
        public bool IsAutoSave { get; set; }
        [DataMember]
        public bool IsQuizPause { get; set; }
        [DataMember]
        public bool IsMultilingualSupport { get; set; }
        [DataMember]
        public bool ExamInstruction { get; set; }
        [DataMember]
        public string ExamInstructionId { get; set; }
    }

现在我不知道如何映射我的 json 对象，即 mockTestData 与 TemplateData 以及更多如何调用int InsertTemplateData(TemplateData data); 这个方法来自我的javascript代码..

在此处输入图像描述 在此处输入图像描述

在我的帖子中编辑

我只是像这样更改了我的 WCF 方法，

[OperationContract]
int InsertTemplateData();

而不是使用

[OperationContract]
int InsertTemplateData(TemplateData data);

和

public class MockTest:IMockTest
    {
        readonly BO_MockTest _objBoMockTest = new BO_MockTest();
        BL_MockTest objBL_BusinessPartners = new BL_MockTest();
        public int InsertTemplateData()
        {
            TemplateData data = new TemplateData();
            _objBoMockTest.Flag = "1";
            _objBoMockTest.TemplateName = data.TemplateName;
            _objBoMockTest.TotalMarks = data.TotalMarks;
            _objBoMockTest.ExamDuration = data.ExamDuration;
            _objBoMockTest.TotalQuestions = data.TotalQuestion;
            //_objBoMockTest.TotalQuestionTypes = data.TotalQuestionType;
            //_objBoMockTest.TotalSections = data.TotalSections;
            _objBoMockTest.CalculatorType = data.CalculatorTupe;
            _objBoMockTest.IsAutoSave = data.IsAutoSave;
            _objBoMockTest.IsQuizPause = data.IsQuizPause;
            _objBoMockTest.IsMultilingualSupport = data.IsMultilingualSupport;
            _objBoMockTest.IsContainExamInstruction = data.ExamInstruction;
            _objBoMockTest.ExamInstructionId = data.ExamInstructionId;
            return 12;
        }
    }

并这样称呼，

IMockTetst.InsertTemplateData(function (result, context, OnSuccess) {
                debugger;

            }, function (error, context, OnError) {
                //toastify("error", "ppp", "System Error", "toast-bottom-right", true);
            }, null);

这样做我得到了预期的结果。所以这意味着我从javascript传递的mockTestData和接收它的TemplateData存在问题......

我的问题是如何映射这两个变量？我认为映射存在问题.. ?? 请需要帮助:) 在此处输入图像描述

标签： javascriptwcf

解决方案

看来您已经解决了如何从 Javascript 代码调用 WCF 服务的问题。剩下的问题是我们如何在使用 JSON 对象时将参数传递给方法。
请参考示例。 

    <script>
        function Calculate() {
            var product = { "Name": "apple", "Amount": 3, "Price": 4.23 };
            CostService.CostOfProducts(product, function (result) {
                console.log(result)
            });
        }

    </script>
</head>
<body>
    <form id="form1" runat="server">

        <asp:ScriptManager ID="ScriptManager1" runat="server">
            <Services>
                <asp:ServiceReference Path="~/Content/CostService.svc" />
            </Services>
        </asp:ScriptManager>
        <div>
            Calculate the total prices of the Products.
        </div>
             <input type="button" value="Price of 3 sandwiches" onclick="Calculate()" />
        <br />
        <span id="additionResult"></span>
    </form>
</body>

SVC 文件。 

[ServiceContract(Namespace = "")]
    [AspNetCompatibilityRequirements(RequirementsMode = AspNetCompatibilityRequirementsMode.Allowed)]
    public class CostService
    {
        [OperationContract]
        public double CostOfProducts(Product product)
        {
            return product.Amount * product.Price;
        }

    }

    [DataContract]
    public class Product
    {
        [DataMember]
        public string Name { get; set; }
        [DataMember]
        public int Amount { get; set; }
        [DataMember]
        public double Price { get; set; }
}

如果有什么我可以帮忙的，请随时告诉我。</p>

推荐阅读