MVC Controller พฤติกรรมที่แตกต่างกันระหว่างการส่งแบบฟอร์มและการโทร Ajax

ฉันค่อนข้างใหม่กับ MVC และการพัฒนาเว็บไซต์โดยทั่วไป ดังนั้นโปรดอดทนกับฉันด้วย

ในเว็บแอปของฉัน ฉันกำลังพยายามเรียกการดำเนินการของคอนโทรลเลอร์ผ่านคำขอ Ajax เนื่องจากฉันต้องการรีเฟรชมุมมองบางส่วนในเพจของฉันเท่านั้น แทนที่จะเป็นทั้งหน้า ทุกอย่างทำงานได้อย่างถูกต้อง (มุมมองบางส่วนจะถูกส่งกลับโดยไม่ต้องรีเฟรชมุมมองหลัก) ยกเว้นมุมมองบางส่วนจะส่งกลับค่าที่ไม่ถูกต้อง หลังจากการดีบัก ฉันพบว่ามีข้อผิดพลาดเกิดขึ้นกับคำสั่ง Request ในการดำเนินการของคอนโทรลเลอร์ เมื่อการดำเนินการของคอนโทรลเลอร์ถูกเรียกโดยการส่งแบบฟอร์มปกติ คำขอสามารถรับค่าอินพุตของผู้ใช้ได้ แต่ไม่ใช่เมื่อฉันเรียกคอนโทรลเลอร์ด้วยคำขอ Ajax พวกเขาเพียงแค่ส่งคืนค่าว่าง

โปรดดูตัวอย่างด้านล่างนี้ ซึ่งเป็นเวอร์ชันที่เรียบง่ายมากของสิ่งที่ฉันกำลังเผชิญอยู่ เมื่อใช้ Ajax ผลรวมจะเป็น 0 เสมอเนื่องจากคำสั่งแยกวิเคราะห์ล้มเหลวด้วยค่าว่าง

ตัวควบคุม:

[HttpPost]
public ActionResult Calculate() {
    ViewBag.Total = 0;
    for(int i = 1; i < 10; i++) {   // max number of Frames that users can add is 10
        string FrameNumber = i.ToString;
        try {
            string rawValue1 = Request["input1_Frame" + FrameNumber];
            string rawValue2 = Request["input2_Frame" + FrameNumber];
            decimal Value1 = decimal.Parse(rawValue1);
            decimal Value2 = decimal.Parse(rawValue2);
            ViewBag.Total += Value1 + Value2;
        } catch {
            break;
    }

    return PartialView("Banner");
}

เจคิวรี:

 $("#calculate").on("click", function () {
    $.ajax({
        cache: false,
        dataType: 'text',
        type: "POST",
        url: "/Home/Calculate",
        success: function (data) {
            $(".banner").html(data);
        },
        error: function () {
            alert("Something went wrong in the controller");
        }
    });
    return false;
})

ดู:

<div class="banner"></div>
<input name="input1" type="text">
<input name="input2" type="text">
<button id="calculate">Calculate Total</button>

มุมมองบางส่วน:

<div>
    Total:
    <span id="totalValue">@ViewBag.Total</span>
</div>

แก้ไข: เพื่อชี้แจงว่าทำไมฉันไม่เพียงแค่ส่งค่าเป็นพารามิเตอร์ Ajax เนื่องจากในมุมมองจริงของฉัน จำนวนอินพุตจะถูกสร้างขึ้นแบบไดนามิกด้วย JQuery ตัวอย่างเช่น ฉันมีเฟรมที่มีอินพุต 15 อินพุต แต่ผู้ใช้สามารถเลือกที่จะเพิ่มเฟรมเพิ่มเติมได้ ดังนั้นรวมแล้วจะมีอินพุต 30, 45, 60,... หรือมากกว่านั้น ฉันไม่แน่ใจว่าจะจัดการพารามิเตอร์ Ajax อย่างไร ดังนั้นสำหรับแต่ละเฟรมฉันจะวนซ้ำ 15 ครั้ง เพิ่ม ID อินพุตในแต่ละครั้ง และขอข้อมูลด้วยวิธีนั้น ฉันได้อัปเดตโค้ดสำหรับคอนโทรลเลอร์เพื่อให้เห็นภาพสิ่งที่ฉันพูดได้ดีขึ้น