CODEWITHSUNDEEP
c#asp.net-mvcrazorasp.net-mvc-5
Vini
Vini

Reputation: 2134

Creating and reading a calculation formula in mvc

I am having a Controller Calculations where I have a property called Formula. The main idea behind the Calculation is to perform operations using objects from other tables in the Database , here for instance SetValues.

What I am trying to achieve

I have a textbox for entering the Formula. I want to make sure that the variables used in the Formula are existing in the database. I can display the names of all the available rows in the table SetValues. I would like to make the values being displayed from the Setvalues click-able so that the value being clicked would be displayed on the textbox. I will keep a table with the mathematical operators as well which would also work in the same way. How can I make the TextBox for Formula the way I want? And how can I make the Names to be entered into the TextBox when clicked.

When the formula has been saved I want to use the formula to perform calculations based on the values of the SetValues(Assume SetValue has properties Name and Values(int)). I understand that I need to parse the Formula to perform the calculation which I have not yet tried, but could find other examples where the same has been performed. I have done something similar but with a Calculation string with numbers alone. I have not done something that would parse a formula and then assign values to it. Is it possible to achieve the parsing?

Calculation View

@foreach(var item in ViewBag.SetValues
{
    <p>@item.Name</p>
}

@Html.LabelFor(model => model.CalculationName, htmlAttributes: new { @class = "control-label col-md-2" })
@Html.EditorFor(model => model.CalculationName, new { htmlAttributes = new { @class = "form-control" } })

@Html.LabelFor(model => model.CalculationFormula, htmlAttributes: new { @class = "control-label col-md-2" })
@Html.EditorFor(model => model.CalculationFormula, new { htmlAttributes = new { @class = "form-control" } })

<input type="submit" value="Create" class="btn btn-default" />

In a ViewBag I have passed the SetValue and the elements are displayed.

The Model classes and Controller are not relevant for the output I guess. But if it is required comment. Further details can be added.

Update : adding Wireframe sample

Wireframe

Upvotes: 1

Views: 2524

Answers (1)

rotgers
rotgers

Reputation: 2010

To solve your question regarding to adding the formula to the formula textbox when clicked. Here is some sample code. I use jQuery with a double click event.

HTML

<b>Formulas:</b><br/>
<i>Double click to append the formula.</i></br>
<select id="formulas" size="5">
    <option>d_0</option>
    <option>v_fix</option>
    <option>f_Fc</option>
    <option>a_sc</option>
</select>
<select id="operands" size="5">
    <option>+</option>
    <option>-</option>
    <option>*</option>
    <option>/</option>
</select>
<br/>
<span id="message" style="color: red"></span>
<hr/>
<b>Formula:</b><br/>
<textarea id="formula"></textarea>

JavaScript

$(document.ready( function() {

    var formulas = $("#formulas");
    var formula = $("#formula");
    var operands = $("#operands");
    var message = $("#message");

    var expectFormula = true;

    formulas.dblclick(function() {

        if(expectFormula == true) {
            var currentFormula = formula.val();
            var appendFormula = formulas.val();
            var newFormula = (currentFormula + " " + appendFormula).trim();
            formula.val(newFormula);
            expectFormula = false;
            return;
        }

        message.html("Operand expected.");
    });

    operands.dblclick(function() {

        if(expectFormula == false) {
            var currentFormula = formula.val();
            var appendFormula = operands.val();
            var newFormula = (currentFormula + " " + appendFormula).trim();
            formula.val(newFormula);
            expectFormula = true;
            return;
        }

        message.html("Formula expected.");  
    });

});

JSFiddle

https://jsfiddle.net/L1r3xdvq/1/

I am by no means a JavaScript expert, but this should demonstrate on how to do this.

Do note that you have to double check the user input on the server, even though it is created with JavaScript, it is possible to enter whatever you want and send this as formula.

Upvotes: 2

Related Questions